css样式选择选项 [英] css style on select option

问题描述

我为选择选项下拉列表创建样式。
是否有可能使字体大小不同？
例如，

I make the style for select option dropdown list. Is it possible that to make the font-size differently? For example,

-- Select Country -- < size 7pt;

和

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

a href =http://jsfiddle.net/VggvD/50/>演示在JS小提琴。

See also demo on JS Fiddle.

它只适用于Firefox。可能是该浏览器不支持？

It works only on Firefox. Could be that browser not support?

Chrome：版本27.0.1453.116 m

Chrome: Version 27.0.1453.116 m

IE：10

Firefox：22.0

Firefox: 22.0

推荐答案

添加CSS 到< option> 标签，例如： http ：//jsfiddle.net/Ahreu/​​

Add a CSS class to the <option> tag for example: http://jsfiddle.net/Ahreu/

看起来像 webkit 浏览器中有一个错误 Google Chrome ，此解决方案无法使用。看看这个：>>在选择中为样式设置样式google chrome

Looks like there's a bug in webkit browsers like Google Chrome and this solution doesn't work. Take a look at this: styling an option in a select with google chrome

这篇关于css样式选择选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！