码迷,mamicode.com
首页 > Web开发 > 详细

纯css改变select默认样式

时间:2017-11-10 18:34:22      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:分享   src   bsp   com   git   webkit   color   覆盖   一点   

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        select.sty1 {
          /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/
          border: solid 1px #000;
        
          /*很关键:将默认的select选择框样式清除*/
          appearance:none;
          -moz-appearance:none;
          -webkit-appearance:none;
        
          /*在选择框的最右侧中间显示小箭头图片*/
          background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;
        
        
          /*为下拉小箭头留出一点位置,避免被文字覆盖*/
          padding-right: 14px;
        }
        
        
        /*清除ie的默认选择框样式清除,隐藏下拉箭头*/
        select.sty1::-ms-expand { display: none; }
    </style>
</head>
<body>
    默认样式
    <select name="">
        <option value="s">aaa</option>
        <option value="d">bbb</option>
        <option value="f">ccc</option>
    </select>
    改变过的样式
    <select name="" class="sty1">
        <option value="s">aaa</option>
        <option value="d">bbb</option>
        <option value="f">ccc</option>
    </select>
</body>
</html>

 

谷歌浏览器中的效果:

技术分享

纯css改变select默认样式

标签:分享   src   bsp   com   git   webkit   color   覆盖   一点   

原文地址:http://www.cnblogs.com/ywang/p/7815615.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!