下拉選擇框無法正確顯示與自定義CSS？

Question

如何爲Chrome和Safari添加自定義CSS選擇框樣式？有沒有修復？

Answer 1

答案： 您需要添加-webkit-appearance：none;以及Chrome和Safari的高度值。

有什麼建議嗎？

資源： http://bavotasan.com/2011/style-select-box-using-only-css/

試試它的jsfiddle刪除和添加風格在谷歌瀏覽器：

之前： - http://jsfiddle.net/JoshSalway/jw6Qy/

後： - http://jsfiddle.net/JoshSalway/cMbTB/

select{ 
    -webkit-appearance: none; 
} 

Answer 2

< select>標籤是固執的生物，但有是的一種方式。

如果標籤中有一個「size」參數，幾乎所有的CSS都會應用。使用這種技術，我創建了一個實際上等同於正常選擇標籤的小提琴，此外，可以用視覺語言中的ComboBox手動編輯該值（除非您在輸入標籤中只輸入）。

所以這裏有一個小例子，看看背後的原理：
（你需要的jQuery的咔嗒機構）：

<style> 

    /* only these 2 lines are truly required */ 
    .stylish span {position:relative;} 
    .stylish select {position:absolute;left:0px;display:none} 

    /* now you can style the hell out of them */ 
    .stylish input { ... } 
    .stylish select { ... } 
    .stylish option { ... } 
    .stylish optgroup { ... } 

</style> 
... 
<div class="stylish"> 
    <label> Choose your superhero: </label> 
    <span> 
     <input onclick="$(this).closest('div').find('select').slideToggle(110)"> 
     <br> 
     <select size=15 onclick="$(this).hide().closest('div').find('input').val($(this).find('option:selected').text());"> 

      <optgroup label="Fantasy"></optgroup> 
      <option value="gandalf">Gandalf</option> 
      <option value="harry">Harry Potter</option> 
      <option value="jon">Jon Snow</option> 

      <optgroup label="Comics"></optgroup> 
      <option value="tony">Tony Stark</option> 
      <option value="steve">Steven Rogers</option> 
      <option value="natasha">Natasha Romanova</option> 

     </select> 
    </span> 
</div> 

這裏有一些更多的風格小提琴： https://jsfiddle.net/dkellner/7ac9us70/

希望這會有所幫助！