如何在不使用圖像的情況下更改選擇下拉箭頭顏色？

Question

所以我試圖讓select標簽中的箭頭成為自定義顏色。 例：

<input type="checkbox" class="checkbox1" checked="checked" />
<input type="text" spellcheck="false" size="20" />
<select class="dropdown">
    <option value=">">&gt;</option>
    <option value="<">&lt;</option>
    <option value=">=">&ge;</option>
    <option value="<=">&le;</option>
    <option value="==">&#61;</option>
    <option value="!=">&ne;</option>
</select>

我已經看到很多使用圖像的建議，但我不能這樣做。 也許正在使用▼ ▼可能是解決方案的一部分？

Answer 1

最新更新 ：（jsFiddle： http ： //jsfiddle.net/ztayse92/ ）將上一個解決方案的箭頭放在下拉列表中並使用透明背景。 這是完美的，它可以解決覆蓋/懸停不可點擊的區域問題。

更新：黑客回答而不使用圖像： （jsFiddle： http ： //jsfiddle.net/swpha0s0/4/ ）

我制作了一個相對定位的容器，我把下拉選擇和覆蓋符號（箭頭）放在絕對位置。 在CSS中我也完全刪除了箭頭樣式。 唯一的缺點是，由於箭頭符號是疊加層，因此無法點擊，換句話說，當鼠標點擊箭頭時，下拉列表將無法打開。 我使箭頭占用空間最少。 我還想過在箭頭上放置一個點擊處理程序並用JavaScript打開下拉列表但是根據這個（ 是否可以使用JS打開HTML選擇來顯示其選項列表？ ）這是不可能的。 當您將鼠標懸停在箭頭上時，我將光標設為默認值，這樣用戶就不會收到錯誤的反饋，這也是可點擊的。 所以這是你想要的最接近的解決方案 - 我很好奇為什么沒有圖像被允許以及它的用例是什么？

HTML：

<div class="parent">
<select class="dropdown">
    <option value="&gt;">&gt;</option>
    <option value="&lt;">&lt;</option>
    <option value="&gt;=">&ge;</option>
    <option value="&lt;=">&le;</option>
    <option value="==">&#61;</option>
    <option value="!=">&ne;</option>
</select><div class="overlay-arrow">&#9660;</div>
</div>

CSS：

select.dropdown {
     -webkit-appearance: none;       
     -moz-appearance: none;    
     appearance: none;    
     background-position: 22px 3px;                
     background-size: 13px 13px; 
     width: 40px;
    height: 20px;
    margin-left: 4px;
    position: absolute;
    cursor: pointer;

}

.overlay-arrow {
    font-size: 9px;
    color: red;
    position: absolute;
    right: 0px;
    top : 10px;
    cursor: default;
    line-height: 1px;

}

.parent {
    position: relative;
    width: 40px;
    height: 20px;
    float: left;
    margin: 0px;
    padding: 0px;
}

原始答案與圖像： （jsFiddle： http ： //jsfiddle.net/swpha0s0/2/ ）：

我建議你使用這樣的CSS

select.dropdown {
     -webkit-appearance: none;       
     -moz-appearance: none;    
     appearance: none;
     background: url('http://www.durhamcollege.ca/wp-content/themes/dc/images/green_download_arrow.png')  no-repeat;         
     background-position: 22px 3px;                
     background-size: 13px 13px; 
     width: 40px;
     height: 20px;
     margin-left: 4px;
}

.dropdown-container {
     float :left;
     margin: 0px;
}

input {
    margin-top:4px;
    float: left;
    display: block;
}
input[type=checkbox]{
    margin-top:8px;   
}

您必須靜態更改背景位置並按照您喜歡的方式居中，但如果您只需要更改箭頭外觀或放置自己的圖像，那就更好了。 沒有image / css或javascript（如果你想完全改變小部件）是不可能的。 您可以在單擊它以更改背景時切換類，以便您可以使另一個箭頭指向上方。