我正试图用我自己的图片替换选择的箭头.我将选择包含在具有相同大小的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;
}<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 …我正在使用带有下拉菜单的表单,其中包含一些禁用的选项,因此用户无法选择它们.我正在尝试通过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>
CSS:
select option[disabled] { color: #000; font-weight: bold }
此代码仅适用于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 …我正在尝试将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> 
#nname {
    padding: 5px;
    color: #000;
    font-size: 12px;
    background: transparent;
    -webkit-appearance: none;
}
但是,背景保持白色,文字保持黑色.有任何想法吗?
看看这个简单的小提琴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;
    }