Question

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

-- 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>

另请参阅我的demo on JSFiddle。

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

我测试过的浏览器：

Chrome：版本27.0.1453.116 m
IE：10
Firefox：22.0

Answer 1

它可行，但很棘手。

正常的选择 - 下拉菜单不会接受样式。但。如果有＆＃34;尺寸＆＃34;标签中的参数，几乎所有CSS都适用。使用这个技巧，我创建了一个实际上相当于普通选择标记的小提琴，加上可以像可视语言中的ComboBox一样手动编辑值（除非你把 readonly 在输入标签中。）

所以，这是一个看到背后原理的最小例子：
（你需要点击机制的jQuery）：

<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>
</div>

这里有更多（实际上太多）风格的小提琴：

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

（再次，为了展示各种可能性，它充满了渐变和效果。我的意思是，呃，我并没有告诉你使用径向渐变来获得goups加上悬停动画的项目！我有一颗心！）

请注意<optgroup>标记如何不像通常那样封装属于它们的选项;是的，这是有意的，它的造型（有礼貌的方式将少得多的样式）。是的，他们确实以这种方式运作良好。

Answer 2

将CSS类添加到<option>标记以对其进行样式设置：http://jsfiddle.net/Ahreu/

目前，WebKit浏览器不支持此行为，因为规范未对其进行定义。看看这个：How to style a select tag's option element?

Answer 3

告诉选项元素是13pt

select option{
    font-size: 13pt;
}

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

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

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

Answer 4

检查这个小提琴，

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

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

.selectDefault, .selectDiv option
{
    font-family:arial;
    font-size:12px;
}

Answer 5

select[value="value"]{
   background-color: red;
   padding: 3px;
   font-weight:bold;
}

Answer 6

试试这个

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

CSS添加你的代码

.select_join option{
    font-size:13px;
}

如何更改选择选项的字体大小？

6 个答案: