今天发现一个比较有意思的属性，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. Business vs Technology

    Business 只是 Technology的子集. Business只是体现在Code中. 比如说是HTML页面中内容的一部分. 或者说业务是对HTML组成的内容的分类. 比如说Smallbusin ...

  2. 在web项目中集成pdf.js的默认查看器

    pdf.jsMozilla开源的一项用于在HTML5平台上显示pdf文档的技术,Mozilla自己的Firefox浏览器也用了pdf.js来预览pdf,可见应该是一个比较成熟稳定的方案(btw,chr ...

  3. redis 的 HyperLogLog

    Redis 在 2.8.9 版本添加了 HyperLogLog 结构. Redis HyperLogLog 是用来做基数统计的算法 HyperLogLog 的优点是,在输入元素的数量或者体积非常非常大 ...

  4. 【matlab】=size(img)的其中两种用法&zeros( )

    i1=imread('D:\Work\1.png'); i1=rgb2gray(i1); [m,n]=size(i1); 返回图片的尺寸信息, 并存储在m.n中.其中m中存储的是行数,n中存储的是列数 ...

  5. position absolute定位之所属的containing box

    http://www.w3.org/TR/CSS2/visudet.html#containing-block-details http://www.zhihu.com/question/199267 ...

  6. 【转】WCF OpenTimeout, CloseTimeout, SendTimeout, ReceiveTimeout

    关于这四个属性,在MSDN中的解释有点敷衍了事.Open/Close/Receive/Send本是HTTP/TCP/SOCKET的概念,Read/Write Operation则是Web Servic ...

  7. c 网络字节序和本机字节序转换

    将多字节整数类型的数据,从主机的字节顺序转化为网络字节顺序 #include <netinet/in.h> uint32_t htonl(uint32_t hostlong);uint16 ...

  8. redis 列表

    Redis 列表(List) Redis列表是简单的字符串列表,按照插入顺序排序.你可以添加一个元素导列表的头部(左边)或者尾部(右边) 一个列表最多可以包含 232 - 1 个元素 (4294967 ...

  9. Linux 集群架构

    集群介绍 Keepalived 配置高可用集群

  10. It is possible that this issue is resolved by uninstalling an existing version of the apk if it is present, and then re-installing ___Error Installing APK

    一 : 根据以下路径,找到Instant Run中的选项         File —— Settings——Build,Execution,Deployment——Instant Run       ...