1

我正在尝试使用不同大小的下拉菜单，因为我的选项位于不同的组中。

我可以更改文本的颜色、背景的颜色，但不能更改选项的高度，也不能更改字体大小（我的意思是，我可以更改但没有两个单独的）

编码

<select>
    <option class="title" disabled>Title 1</option>
    <option>Select 1</option>
    <option>Select 2</option>
    <option class="title" disabled>Title 2</option>
    <option>Select 3</option>
 </select>

CSS

select .title
{
    color:#E0E0E0;
    font-size:12px;
    font-weight:bold;
    height:15px;
    background-color:#0000FF;
}

select option
{
    color:#0000FF;
    font-size:24px;
    font-weight:normal;
    height:30px;
    background-color:#0000FF;
}
4

3 回答 3

3

<optgroup>您是否知道专门为这样的事情调用的元素？

<select>
     <optgroup label="Title 1">
       <option>Select 1</option>
       <option>Select 2</option>
     </optgroup>
     <optgroup label="Title 2">
        <option>Select 3</option>
     </optgroup>
</select>

如果你想改变optgrouptextsize 试试这个

optgroup:before {
    content: "Demo";
    font-size: 18px;
}

更改 OPTGROUP 标题小提琴的大小

于 2012-11-22T14:55:11.690 回答
0

不幸的是，许多表单元素的样式非常有限。标签可以有一些改变的<option>样式，但 font-size 不是其中之一。它还取决于您使用的浏览器。

请参阅此页面以了解可能的情况： http ://www.electrictoolbox.com/style-select-optgroup-options-css/

于 2012-11-22T15:01:46.557 回答
0

这是我的做法

HTML

<select>
 <optgroup label="Title 1"></optgroup> 

  <option>Select 1</option>
  <option>Select 2</option>

   <optgroup label="Title 2"></optgroup>

   <option>Select 3</option>
 </select>

CSS

select
{
 width: 100%;
 font-size:24px;
}
select optgroup 
{
 color:#E0E0E0;
 font-size:12px;
 font-weight:bold;
 background-color:#0000FF;
}
select option
{
 color:#0000FF;
 font-weight:normal;
 background-color:#FFFFFF;
}

高度虽然不起作用。

于 2012-11-22T15:14:24.683 回答