gpt4 book ai didi

css - 选择箭头样式更改

转载 作者:数据小太阳 更新时间:2023-10-29 09:06:59 24 4
gpt4 key购买 nike

我正在尝试用我自己的图片替换选择的箭头。我将选择包含在具有相同大小的 div 中,将选择的背景设置为透明,并在 div 的右上角包含一张图片(与箭头大小相同)作为背景。

它只适用于 Chrome。

enter image description here

我怎样才能让它在 Firefox 和 IE9 中工作,我得到这个:

enter image description here

.styled-select {
width: 100px;
height: 17px;
overflow: hidden;
overflow: -moz-hidden-unscrollable;
background: url(images/downarrow_blue.png) no-repeat right white;
border: 2px double red;
display: inline-block;
position: relative;
}

.styled-select select {
background: transparent;
-webkit-appearance: none;
width: 100px;
font-size: 11px;
border: 0;
height: 17px;
position: absolute;
left: 0;
top: 0;
}

body {
background-color: #333333;
color: #FFFFFF;
}

.block label {
color: white;
}
<HTML>

<HEAD>
</HEAD>

<BODY>
<p/>
<form action="/prepareUpdateCategoryList.do?forwardto=search">

<fieldset class="block" id="searchBlock">
<p>
<label style="width:80px">Class</label>
<div class="styled-select">
<select property="voucherCategoryClass">
<option value="0">Select </option>
<option value="7382">steam </option>
</select>
</div>

</p>
</fieldset>
</form>
</BODY>

</HTML>

最佳答案

你有没有试过这样的事情:

.styled-select select {
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari and Chrome */
appearance:none;
}

尚未测试,但应该可以。

编辑:看起来 Firefox 直到版本 35 ( read more here) 才支持此功能

有一个解决方法 here ,看看那个帖子上的 jsfiddle

关于css - 选择箭头样式更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14218307/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com