CSS选择框箭头样式

Question

我想从选择框中删除默认箭头，并希望使用自定义图标。 从之前对SO的回答中，我发现它是不可能的（使其适用于主流浏览器）。 唯一的可能性是将select包装在div中，并将其宽度设置为大于div宽度并设置overflow：hidden。 我正在尝试跟随，但它不起作用。 我做错了什么？

 .selectParent { width: 80px; overflow: hidden; } .selectParent select { width: 100px; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 2px 30px 2px 2px; border: none; background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat right center; } 

 <div class="selectParent"> <select> <option value="1">Option 1</option> <option value="2">Option 2</option> </select> </div> 

JSFiddle： http ： //jsfiddle.net/gcPmC/

Answer 1

请按照以下方式：

 .selectParent { width:120px; overflow:hidden; } .selectParent select { display: block; width: 100%; padding: 2px 25px 2px 2px; border: none; background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") right center no-repeat; appearance: none; -webkit-appearance: none; -moz-appearance: none; } .selectParent.left select { direction: rtl; padding: 2px 2px 2px 25px; background-position: left center; } /* for IE and Edge */ select::-ms-expand { display: none; } 

 <div class="selectParent"> <select> <option value="1">Option 1</option> <option value="2">Option 2</option> </select> </div> <br /> <div class="selectParent left"> <select> <option value="1">Option 1</option> <option value="2">Option 2</option> </select> </div> 

Answer 2

尝试更换

padding: 2px 30px 2px 2px;

同

padding: 2px 2px 2px 2px;

它应该工作。