首页 » 前端技术 » 自定义select下拉框CSS样式的方法

自定义select下拉框CSS样式的方法

高蒙 2015/12/03 20:57 3.2k浏览 0评论 Html/Css


 大家都知道,如果用CSS来定义select元素样式的话,常常会无效或者不彻底,其实这里有个技巧:使用appearance:none去除select的默认样式,然后再使用gradient、background-size,background-position等样式属性来彻底自定义出个性化的select元素。css代码:

 

select{
         margin: 0;
         padding: 0;
         outline: none;
         height: 25px;
         line-height: 25px;
         width: 120px;
         border: rgb(191, 204, 220) 1px solid;
         border-radius: 3px;
         display: inline-block;
         font: normal 12px/25px "微软雅黑", "SimSun", "宋体", "Arial";
         background-size: 5px 5px,5px 5px,25px 25px,1px 25px;
         background-color: #fff;
         background-image: repeating-linear-gradient(225deg,rgb(105,123,149) 0%,rgb(105,123,149) 50%,transparent 50%,transparent 100%), 
         repeating-linear-gradient(135deg,rgb(105,123,149) 0%,rgb(105,123,149) 50%,transparent 50%,transparent 100%), 
         linear-gradient( #FFFFFF 0%,#F8F9Fd, #EFFAFA 100%), 
         repeating-linear-gradient( rgb(191, 204, 220) 0%,rgb(191, 204, 220) 100%);
         background-repeat: no-repeat;
         background-position: 101px 10px,106px 10px,right top,92px top;
         -webkit-appearance: none
 }



相关文章

我有话说

站长昵称:(*)

输入内容:

选个头像:

评论列表

    ...

    高蒙

    男, PHP程序猿

    文章

    487

    标签

    42

    热度

    10w+

    南京, 江苏, 中国

    人生要是没有理想, 那跟咸鱼有什么分别。