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

 Html/Css   高蒙   阅读(2732)   评论(0)   2015-12-03 20:57:58    下拉框 


 大家都知道,如果用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
 }



相关文章



我要评论


站长昵称:(*)

输入内容:


评论列表


高蒙

男,程序猿一枚

 

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


关于我

  http://www.shuchengxian.com

高蒙个人博客是以PHP技术为主的程序员个人博客。博客主要发布php开发中遇到的问题以及解决办法,同时个人博客也分享网站模板素材,jquery插件等方面素材。


站点声明:相关侵权、举报、投诉及建议等,请发E-mail:936594075#qq.com(#替换成@)。

Copyright © 2018, www.shuchengxian.com, All rights reserved. 个人博客皖公网安备 34152302000022号 皖ICP备15015490号

关键词:个人博客,PHP博客,PHP博客程序,高蒙博客,高蒙个人博客,php程序员博客,程序员个人博客