如何更改select框箭头
我需要你的帮助。
我似乎无法把我的头围绕在这一个，并找出答案。 如何在select框中更改默认的Windows 7，IE 10默认箭头： 
使其看起来像这样，使用下面的自定义箭头： 
。
这是我希望使用的箭头： 
这是我的HTML标记：
<!DOCTYPE html> <html> <head> <style type="text/css"> select { font: normal 13px Arial; color: #000;} .container { border: 1px solid red; position: relative; width: 124px; height: 18px; overflow: hidden; } .inpSelect { color: black; background: #ffa; position: absolute; width: 128px; top: -2px; left: -2px; } </style> <script type="text/javascript"> </script> </head> <body> <div class="container"> <select class="inpSelect" name="xxx"> <option value="0" selected="selected">actual browser</option> <option value="1">IE</option> <option value="2">Firefox</option> <option value="3">Opera</option> <option value="4">Safari</option> </select> </div> </body> </html> 您可以使用纯CSS箭头跳过容器或背景图片：
select { /* make arrow and background */ background: linear-gradient(45deg, transparent 50%, blue 50%), linear-gradient(135deg, blue 50%, transparent 50%), linear-gradient(to right, skyblue, skyblue); background-position: calc(100% - 21px) calc(1em + 2px), calc(100% - 16px) calc(1em + 2px), 100% 0; background-size: 5px 5px, 5px 5px, 2.5em 2.5em; background-repeat: no-repeat; /* styling and reset */ border: thin solid blue; font: 300 1em/100% "Helvetica Neue", Arial, sans-serif; line-height: 1.5em; padding: 0.5em 3.5em 0.5em 1em; /* reset */ border-radius: 0; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance:none; -moz-appearance:none; }
在这里示例
仅使用一个select器：
select { width: 268px; padding: 5px; font-size: 16px; line-height: 1; border: 0; border-radius: 5px; height: 34px; background: url(data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd; -webkit-appearance: none; background-position-x: 244px; }
小提琴手
CSS
select.inpSelect { //Remove original arrows -webkit-appearance: none; //Use png at assets/selectArrow.png for the arrow on the right //Set the background color to a BadAss Green color background: url(assets/selectArrow.png) no-repeat right #BADA55; }
