css3 select 去掉下三角等

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>select</title> <style type="text/css"> select { cursor: pointer;/* 9 */ padding: 0.5em;/* 10 */ padding-right: 2em;/* 11 */ width: 80%;/* 12 */ border: 1px solid #ddd;/* 13 */ background: transparent;/* 13 */ background-image: none;/* 13 */ -webkit-appearance: none;/* 13 */ -moz-appearance: none;/* 13 */ appearance: none;/* 13 */ text-indent: 0.01px;/* 14 */ text-overflow: '';/* 14 */ width: 160% \9;/* 15 */ } select:focus { outline: none; /* 16 */ } </style> </head> <body> <select name="make"> <option>Make</option> <option value="acura">Acura</option> <option value="chrysler" selected="">Chrysler</option> <option value="dodge">Dodge</option> <option value="ford">Ford</option> <option value="toyota">Toyota</option> <option value="derp">A really long name for testing</option> </select> </body> </html>

提示：你可以先修改部分代码再运行。

http://www.html5tricks.com/demo/simple-css3-custom-select-form/index.html

转载请注明：有爱前端 » css3 select 去掉下三角等