相关疑难解决方法(0)

如何使用CSS设置<select>下拉列表的样式?

是否有一种仅限CSS的方式来设置<select>下拉列表的样式?

我需要<select>尽可能多地为一个表单设置样式,而不需要任何JavaScript.我可以在CSS中使用哪些属性?

此代码需要与所有主流浏览器兼容:

  • Internet Explorer 6,7和8
  • 火狐
  • 苹果浏览器

我知道我可以使用JavaScript:示例.

我不是在谈论简单的造型.我想知道,只有CSS才能做到最好.

我在Stack Overflow上发现了类似的问题.

这一次在Doctype.com.

html css combobox cross-browser skinning

1258
推荐指数
19
解决办法
155万
查看次数

选择箭头样式更改

我正试图用我自己的图片替换选择的箭头.我将选择包含在具有相同大小的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 select

104
推荐指数
13
解决办法
40万
查看次数

如何设置表单中的"禁用选项"的样式

我正在使用带有下拉菜单的表单,其中包含一些禁用的选项,因此用户无法选择它们.我正在尝试通过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)

css forms

21
推荐指数
3
解决办法
6万
查看次数

在html中更改透明下拉列表的背景颜色

我正在尝试将HTML中下拉列表的背景颜色更改为透明.

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)

CSS

#nname {
    padding: 5px;
    color: #000;
    font-size: 12px;
    background: transparent;
    -webkit-appearance: none;

}
Run Code Online (Sandbox Code Playgroud)

但是,背景保持白色,文字保持黑色.有任何想法吗?

css

12
推荐指数
1
解决办法
9万
查看次数

HTML/CSS:select标签内的浮动选项标签

看看这个简单的小提琴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)

html css

7
推荐指数
1
解决办法
1329
查看次数

标签 统计

css ×5

html ×2

combobox ×1

cross-browser ×1

forms ×1

select ×1

skinning ×1