19

我正在尝试设置选择选项下拉列表的样式。是否可以使选项的字体大小与默认值不同？例如，默认值：

-- Select Country --

尺寸为 7pt；和选项之一，

Georgia

尺寸为 13pt。

这是我的下拉列表：

.select_join {
  width: 170px;
  height: 28px;
  overflow: hidden;
  background: url('http://s24.postimg.org/lyhytocf5/dropdown.png') no-repeat right #FEFEFE;
  border: #FEFEFE 1px solid;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: inset 0px 0px 10px 1px #FEFEFE;
  box-shadow: inset 0px 0px 10px 1px #FEFEFE;
}
.select_join select {
  background: transparent;
  width: 170px;
  font-size:7pt;
  color:grey;
  border: 0;
  border-radius: 0;
  height: 28px;
  -webkit-appearance: none;
}
.select_join select:focus {
  outline: none;
}
<div style="background-color:pink;height:150px; text-align:center;">
  <br/>
  <div class="select_join" style="margin-left:15px">
    <select name="txtCountry">
      <option>-- Select Country --</option>
      <option value="1">Georgia</option>
      <option value="2">Afghanistan</option>
    </select>
  </div>
</div>

另请参阅我在 JSFiddle 上的演示。

不幸的是，它仅适用于 Firefox。难道是其他浏览器不支持<option>元素样式？

我测试过的浏览器：

  • 铬：版本 27.0.1453.116 m
  • 即：10
  • 火狐：22.0
4

6 回答 6

18

我们这里需要一个技巧...

正常的选择下拉内容不接受样式。但。如果标签中有“大小”参数，则几乎所有 CSS 都会适用。考虑到这一点，我创建了一个实际上等同于普通选择标签的小提琴，而且可以像可视语言中的 ComboBox 一样手动编辑该值（除非您将readonly放在输入标签中）。

一个简化的例子：

<style>

    /* only these 2 lines are truly required */
    .stylish span {position:relative;}
    .stylish select {position:absolute;left:0px;display:none}

    /* now you can style the hell out of them */
    .stylish input    { ... }
    .stylish select   { ... }
    .stylish option   { ... }
    .stylish optgroup { ... }

</style>
...
<div class="stylish">
    <label> Choose your superhero: </label>
    <span>
        <input onclick="$(this).closest('div').find('select').slideToggle(110)">
        <br>
        <select size=15 onclick="$(this).hide().closest('div').find('input').val($(this).find('option:selected').text());">

            <optgroup label="Fantasy"></optgroup>
            <option value="gandalf">Gandalf</option>
            <option value="harry">Harry Potter</option>
            <option value="jon">Jon Snow</option>

            <optgroup label="Comics"></optgroup>
            <option value="tony">Tony Stark</option>
            <option value="steve">Steven Rogers</option>
            <option value="natasha">Natasha Romanova</option>

        </select>
    </span>
    <!--

        For the sake of simplicity, I used jQuery here.
        Today it's easy to do the same without it, now
        that we have querySelector(), closest(), etc.

    -->
</div>

一个活生生的例子：

https://jsfiddle.net/7ac9us70/1052/

注 1：抱歉渐变和所有花哨的东西，不，它们不是必需的，是的，我在炫耀，我知道，标签 onlyhuman，标签 notproud。

注意 2：这些<optgroup>标签没有像通常那样封装属于它们的选项；这是故意的。样式更好（礼貌的方式会少很多样式），是的，这很容易，并且适用于每个浏览器。

于 2016-06-12T11:59:47.620 回答
16

将 CSS 类添加到<option>标签以设置样式：http: //jsfiddle.net/Ahreu/

目前 WebKit 浏览器不支持这种行为，因为它没有被规范定义。看看这个：How to style a select tag's option element?

于 2013-07-02T07:40:28.860 回答
4

告诉选项元素是 13pt

select option{
    font-size: 13pt;
}

然后第一个选项元素是 7pt

select option:first-child {
    font-size: 7pt;
}

运行演示：http: //jsfiddle.net/VggvD/1/

于 2013-07-02T08:15:01.343 回答
0

尝试这个

http://jsfiddle.net/VggvD/2/

CSS 添加你的代码

.select_join option{
    font-size:13px;
}
于 2013-07-02T07:56:36.017 回答
0

检查这个小提琴，

我刚刚编辑了上面的小提琴，它的工作

http://jsfiddle.net/narensrinivasans/FpNxn/1/

.selectDefault, .selectDiv option
{
    font-family:arial;
    font-size:12px;
}
于 2013-07-02T10:29:54.820 回答
0 
select[value="value"]{
   background-color: red;
   padding: 3px;
   font-weight:bold;
}
于 2018-02-13T14:17:50.843 回答