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

前端之家收集整理的这篇文章主要介绍了html – 如何在不使用图像的情况下更改选择下拉箭头颜色?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
所以我试图让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>

我已经看到很多使用图像的建议,但我不能这样做.也许使用&#9660;▼可能是解决方案的一部分?

解决方法

最新消息:(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;   
}

您必须静态更改背景位置并按照您喜欢的方式居中,但如果您只需要更改箭头外观或放置自己的图像,那就更好了.没有image / css或javascript(如果你想完全改变小部件)是不可能的.您可以在单击它以更改背景时切换类,以便您可以使另一个箭头指向上方.

原文链接:https://www.f2er.com/html/225707.html

猜你在找的HTML相关文章