实现原理很简单:
1,使用appearance:none去除select的默认样式;
2,配合使用gradient、background-size,background-position,拼出自定义的样式
我定义的样式和浏览器默认给出的样式没多大差别,主要是简单实现一下,大家可以发挥想象力做出绚丽的select。
实现css如下:
1 select{ 2 margin: 0; 3 padding: 0; 4 outline: none; 5 height: 25px; 6 line-height: 25px; 7 width: 120px; 8 border: rgb(191, 204, 220) 1px solid; 9 border-radius: 3px; 10 display: inline-block; 11 font: normal 12px/25px "微软雅黑", "SimSun", "宋体", "Arial"; 12 background-size: 5px 5px,5px 5px,25px 25px,1px 25px; 13 background-color: #fff; 14 background-image: repeating-linear-gradient(225deg,rgb(105,123,149) 0%,rgb(105,123,149) 50%,transparent 50%,transparent 100%), 15 repeating-linear-gradient(135deg,rgb(105,123,149) 0%,rgb(105,123,149) 50%,transparent 50%,transparent 100%), 16 linear-gradient( #FFFFFF 0%,#F8F9Fd, #EFFAFA 100%), 17 repeating-linear-gradient( rgb(191, 204, 220) 0%,rgb(191, 204, 220) 100%); 18 background-repeat: no-repeat; 19 background-position: 101px 10px,106px 10px,right top,92px top; 20 -webkit-appearance: none 21 }
对CSS掌握的不是很好,用的比较笨拙,还请高手指教。