我正试图用我自己的图片替换选择的箭头.我将选择包含在具有相同大小的div中,我将选择的背景设置为透明,并且我在div的右上角包含一张图片(与箭头大小相同)作为背景.
它只适用于Chrome.
我怎样才能使它在Firefox和IE9中工作,我得到了这个:

.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;
}Run Code Online (Sandbox Code Playgroud)
<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 …Run Code Online (Sandbox Code Playgroud)我正在使用带有下拉菜单的表单,其中包含一些禁用的选项,因此用户无法选择它们.我正在尝试通过css自定义这些元素,但我在使用Chrome和IE7/8/9/10时遇到了一些问题.
HTML:
<div class="formBody">
<select name="form[categoria][]" id="categoria" class="rsform-select-box">
<option selected="selected" value="">Scegli una categoria</option>
<option disabled="disabled" value="">Impresa </option>
</select>
<span class="formValidation">
<span id="component50" class="formNoError">Scegli una categoria</span>
</span>
</div>
Run Code Online (Sandbox Code Playgroud)
CSS:
select option[disabled] { color: #000; font-weight: bold }
Run Code Online (Sandbox Code Playgroud)
此代码仅适用于Firefox,不适用于Chrome和IE(所有版本).
有什么想法解决这个问题吗?
在选择框的html代码下面
<div class="formBody"><select name="form[categoria][]" id="categoria" class="rsform-select-box" ><option selected="selected" value="">Scegli una categoria</option><option disabled="disabled" value="">Impresa </option><option value="Servizi">Servizi</option><option value="Informatica">Informatica</option><option value="Commercio">Commercio</option><option value="Telecomunicazioni">Telecomunicazioni</option><option value="Editoria/Stampa">Editoria/Stampa</option><option value="Meccanica/Elettrica">Meccanica/Elettrica</option><option value="Alimentare">Alimentare</option><option value="Chimica/Farmaceutica">Chimica/Farmaceutica</option><option disabled="disabled" value="">Edilizia </option><option value="Tessile/Moda">Tessile/Moda</option><option value="Mobili/Arredamenti">Mobili/Arredamenti</option><option value="Alberghi/Ristoranti">Alberghi/Ristoranti</option><option value="Trasporto/Logistica">Trasporto/Logistica</option><option value="Finanza">Finanza</option><option value="Altro">Altro</option><option disabled="disabled" value="">Professionista </option><option value="Commercialista">Commercialista</option><option value="Ragioniere">Ragioniere</option><option value="Notaio">Notaio</option><option value="Tributarista">Tributarista</option><option value="Avvocato">Avvocato</option><option value="Consulente del lavoro">Consulente …Run Code Online (Sandbox Code Playgroud) 我正在尝试将HTML中下拉列表的背景颜色更改为透明.
<select id="nname">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Run Code Online (Sandbox Code Playgroud)
#nname {
padding: 5px;
color: #000;
font-size: 12px;
background: transparent;
-webkit-appearance: none;
}
Run Code Online (Sandbox Code Playgroud)
但是,背景保持白色,文字保持黑色.有任何想法吗?
看看这个简单的小提琴option里面浮动的select.
这似乎在Chrome和Edge中完美运行,但在Firefox中则不然.为了在Firefox中获得相同的结果,有没有可能或黑客?
<select size="8">
<option></option>
<option></option>
<option></option>
<option></option>
<option class="flip"></option>
<option class="flip"></option>
<option class="flip"></option>
<option class="flip"></option>
</select>
select{
width: 420px;
height: 200px;
overflow: hidden;
}
option{
width: 100px;
height: 100px;
float: left;
}
select option:nth-child(odd){
background: #aaa;
}
select .flip:nth-child(odd){
background: #fff;
}
select .flip:nth-child(even){
background: #aaa;
}
Run Code Online (Sandbox Code Playgroud)