自定义下拉列表箭头

Question

我想创建一个下拉列表，但是我需要使箭头始终可见，并根据您在此处看到的内容进行自定义：

https://jsfiddle.net/d388daek/

对于数字输入字段，我也该如何添加向上箭头，是否可以使用⌄ 作为HTML字符实体而不是箭头？

Answer 1

的HTML

 .styleSelect select { background: transparent; width: 168px; padding: 5px; font-size: 16px; line-height: 1; border: 0; border-radius: 0; height: 34px; /* -webkit-appearance: none; */ /*This line hides the arrow completely*/ color: #000; border-color: rgb(169, 169, 169); } .styleSelect { width: 140px; height: 34px; border: 2px solid #000; border-color: rgb(170, 170, 170); } 

 <div class="styleSelect"> <select class='regularcolor'> <option>one</option> <option>two</option> </select> </div> <div class="styleSelect"> <select class='offcolor'> <option>one</option> <option>two</option> </select> </div> 

尝试一下，您显然可以对其进行更多自定义，以使其具有某种外观。 希望这可以帮助。