如何在不使用图像的情况下更改选择下拉箭头的颜色？

Question

如何在不使用图像的情况下更改选择下拉箭头的颜色？

8

我想让下拉选择框中的箭头显示为自定义颜色。

例如：

<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>

我看到很多建议使用图片代替，但我不能这样做。也许使用▼▼可以是解决方案的一部分？

- bonzo

1

问题在于CSS无法替换select列表中的箭头，因为它是由浏览器渲染的。此外，您不能在select列表上使用:before和:after伪选择器，这就是为什么我认为您也无法使用▼的原因。您最好使用背景图像方法。 - Fahad Hasan

@takkun 你看了我的更新了吗？ - Michail Michailidis

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michail Michailidis · Accepted Answer

LATEST UPDATE:（jsFiddle：http://jsfiddle.net/ztayse92/）使前一个解决方案的箭头位于下拉菜单下方并使用透明背景。这是最完美的解决方案，它解决了覆盖/悬停不可点击区域的问题。 更新：（jsFiddle：http://jsfiddle.net/swpha0s0/4/）我创建了一个相对定位的容器，并使用绝对定位放置了下拉选择和覆盖符号（箭头）。在CSS中，我也完全删除了箭头样式。唯一的缺点是，由于箭头符号是覆盖层，所以无法单击，换句话说，当鼠标单击箭头时，下拉菜单不会打开。我尽可能减少了箭头占用的空间。我还考虑过在箭头上放置一个单击处理程序，并使用JavaScript打开下拉菜单，但根据此(Is it possible to use JS to open an HTML select to show its option list?)不可能。当您将鼠标悬停在箭头上时，我使光标默认，这样用户就不会得到错误的反馈，即此项可点击。因此，这是最接近您所需的解决方案-我很好奇为什么不允许使用图像，以及何时使用它？

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;   
}

您需要静态地更改背景位置并使其居中，但如果您只需要更改箭头外观或放置自己的图像，则这很好。如果要完全更改小部件，则无法在没有图像/CSS或JavaScript的情况下执行此操作。您可以在单击它时切换一个类来更改背景，以便您也可以有另一个向上指向的箭头。