Question

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

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

代码

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

Answer 1

你是否知道一个名为<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>

如果您想更改optgroup文本大小，请尝试使用此

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

Change Size Of OPTGROUP Header Fiddle

Answer 2

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

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

Answer 3

我是这样做的

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

虽然高度不起作用。

选择中不同大小的选项

3 个答案: