今天发现一个比较有意思的属性，appearance:none

可能有朋友不认识，但是有一个标签你肯定认识：select。

这个标签的样式是这样的：

一般情况下，我们所使用的border:0; 去除边框这种方式在某些浏览器是对它是不起作用的，比如:Opera 浏览器下就没有作用。

再拿google浏览器举例，虽然有作用，边框可以去除掉，但是右边的倒三角却保留了下来。

比如这样：

如果想要将select的边框和倒三角全部去除掉，这里有两个方法和大家分享一下。

1.可以在select的外部包一个div标签，设置超出隐藏属性，设置好里面select的宽度和高度即可。

2.如果觉得上面的方法比较麻烦，可以使用Css3的一个属性。

appearance:none

-moz-appearance:none /*火狐*/

-webkit-appearance:none /*苹果和谷歌*/

去除select边框和三角-----appearance:none的更多相关文章

  1. H5安卓端浏览器如何去除select的边框？

    H5安卓端浏览器如何去除select的边框? android下没有问题,在apple下无三角号. -webkit-appearance:none; border-radius:0

  2. 去除select下拉框默认样式

    去除select下拉框默认样式 select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #; /*很关键:将默认的select选 ...

  3. table标签去除默认边框

    table去除默认边框 1.在没有出去默认边框时,改变底部颜色,依然显示1px左右的白色边框 2.为table 加上 border="0" cellpadding="0& ...

  4. CSS，点击去除虚线边框代码

  5. jquery去重复 如何去除select控件重复的option

    #1.去除select控件重复的option <select id="companyId" onchange="getContract()" name=& ...

  6. WPF去除窗体边框及白色边框

    <Window x:Class="WpfAppFirst.Evaluation" xmlns="http://schemas.microsoft.com/winfx ...

  7. android 自定义Dialog去除黑色边框

    在自定义Dialog时显示的界面中老是有黑色的边框,下面就介绍使用style去除黑色边框方法. 首先在values/styles定义自定义样式: <style name="MyDial ...

  8. 去除html页面中按钮在ios中的默认样式，去除select自带的小三角图标

    btn{-webkit-appearance: none;} -webkit-appearance: none也能去掉select下拉列表后面自带的小三角

  9. 去除input边框 input去除边框 去除input获取焦点时的蓝色外边框

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. useradd groupadd passwd usermod userdel chfn id

    chfn   修改用户信息 id 显示当前用户和用户组的id

  2. VIM技巧：选择文本块

    在正常模式下(按ESC进入)按键v进入可视化模式,然后按键盘左右键或h,l键即可实现文本的选择.其它相关命令:v:按字符选择.经常使用的模式,所以亲自尝试一下它. V:按行选择.这在你想拷贝或者移动很 ...

  3. ffmpeg把ts文件转m3u8并切片

    Linux_x86_64流媒体环境:nginx + EasyDarwin-master 客户端播放器:VLC media player 下载windows下的ffmepg二进制版本,请进网站http: ...

  4. Java程序员的IntelliJ IDEA使用教程

    前言 博主是Java程序员,以前一直都用myeclipse来开发的,说实话感觉myeclipse毫无美感可言,后来经过同事介绍,认识了IDEA,一眼就相中了IDEA黑色的主题风格,自此就抛弃了旧爱my ...

  5. 2 python大数据挖掘系列之淘宝商城数据预处理实战

    preface 在上一章节我们聊了python大数据分析的基本模块,下面就说说2个项目吧,第一个是进行淘宝商品数据的挖掘,第二个是进行文本相似度匹配.好了,废话不多说,赶紧上车. 淘宝商品数据挖掘 数 ...

  6. springmvc表单验证

    http://blog.csdn.net/daryl715/article/details/1645880 http://blog.csdn.net/shuwei003/article/details ...

  7. java使用jdom生成xml格式文件

    本文生成xml使用的工具是jdom.jar,下载地址如下: 链接:https://eyun.baidu.com/s/3slyHgnj 密码:0TXF 生成之后的文档格式类型,就如上面的图片一样,简单吧 ...

  8. docker 相关文章

    https://baijiahao.baidu.com/s?id=1581420975184566963&wfr=spider&for=pc    创建centos基础镜像 https ...

  9. 禁止requests请求https的提示InsecurePlatformWarning: A true SSLContext object is not available. This prevents urllib3 from configuring SSL appropriately and may cause certain SSL connections to fail. For more

     提示这个 InsecurePlatformWarning: A true SSLContext object is not available. This prevents urllib3 from ...

  10. vuejs中使用echart图表

    首先安装echart npm i echarts -S 加下来以使用这个图表为例 在vue组件中像这样使用: <template> <div :class="classNa ...