[英]How to change the select drop down arrow color without using an image?
所以我试图让select标签中的箭头成为自定义颜色。 例:
<input type="checkbox" class="checkbox1" checked="checked" />
<input type="text" spellcheck="false" size="20" />
<select class="dropdown">
<option value=">">></option>
<option value="<"><</option>
<option value=">=">≥</option>
<option value="<=">≤</option>
<option value="==">=</option>
<option value="!=">≠</option>
</select>
我已经看到很多使用图像的建议,但我不能这样做。 也许正在使用▼
▼可能是解决方案的一部分?
最新更新 :(jsFiddle: http : //jsfiddle.net/ztayse92/ )将上一个解决方案的箭头放在下拉列表中并使用透明背景。 这是完美的,它可以解决覆盖/悬停不可点击的区域问题。
更新:黑客回答而不使用图像: (jsFiddle: http : //jsfiddle.net/swpha0s0/4/ )
我制作了一个相对定位的容器,我把下拉选择和覆盖符号(箭头)放在绝对位置。 在CSS中我也完全删除了箭头样式。 唯一的缺点是,由于箭头符号是叠加层,因此无法点击,换句话说,当鼠标点击箭头时,下拉列表将无法打开。 我使箭头占用空间最少。 我还想过在箭头上放置一个点击处理程序并用JavaScript打开下拉列表但是根据这个( 是否可以使用JS打开HTML选择来显示其选项列表? )这是不可能的。 当您将鼠标悬停在箭头上时,我将光标设为默认值,这样用户就不会收到错误的反馈,这也是可点击的。 所以这是你想要的最接近的解决方案 - 我很好奇为什么没有图像被允许以及它的用例是什么?
HTML:
<div class="parent">
<select class="dropdown">
<option value=">">></option>
<option value="<"><</option>
<option value=">=">≥</option>
<option value="<=">≤</option>
<option value="==">=</option>
<option value="!=">≠</option>
</select><div class="overlay-arrow">▼</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(如果你想完全改变小部件)是不可能的。 您可以在单击它以更改背景时切换类,以便您可以使另一个箭头指向上方。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.