與自定義圖標

Question

選擇輸入我有一個選擇輸入和我已禁用默認瀏覽器appearences如下

select { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearence: none; 
} 

我想用一個自定義的箭頭，以展開和摺疊來選擇菜單。我已經嘗試過各種js技巧，但沒有什麼真的可以正確工作。

我已經考慮過使用純css使選擇輸入透明z-index 2.因此，觸發器將落入位置並顯示爲一個按鈕。

這裏是jfiddle，但我不能讓它工作。

Answer 1

您可以嘗試在您的選擇框上設置背景。 ID樣式似乎不適用於選擇框，所以你寧願直接選擇（如果你有多個選擇框包裝它們）。

select { 
     padding: 2px 2px 2px 2px; 
     border: none; 
     background-image: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png"); 
     background-position: right center; /*Positioning*/ 
     background-repeat: no-repeat; /*Prevent showing multiple background images*/ 
    } 

像這樣的事情可能會奏效，我爲導向這個fiddle我被帶到由this question。希望這可以幫助。