如何更改下拉菜单中第一个选项标签的字体大小（选择）？

Question

如何更改 select 标签中第一个 option 标签的字体大小？我已经尝试更改选项的 CSS：first-child with no lucky。

我希望第一个选项的字体大小为 25 像素，而列表中的其他项目的字体大小为 12 像素。

我已经在这里阅读了可以更改第一个选项的字体颜色和字体类型的教程，但是当我对它们应用 font-size 时，它​​似乎没有生效。

这可以通过 CSS 或 JQuery 来实现吗？谢谢！

HTML 代码：

<select>
<option>Select (25px)</option>
<option>List 1 (12px)</option>
<option>List 2 (12px)</option>
<option>List 3 (12px)</option>
<option>List 4 (12px)</option>
</select>

Answer 1

如果下面是您要更改 SELECT 标记中字体大小的选项

    <option id="op1">option 1</option>

将下面的代码放在头元素中

   <script>
     document.getElementById("op1").style.fontSize ="25px";
   </script>

Answer 2

CSS

 <style>


 select{
          width: 150px;
          height: 30px;
          padding: 5px;
         font-size:12px;
        }
        select option { color: black; }
        select option:first-child
        {
          color: green;
          font-size:25px;
        }
        </style>

HTML

  <select>
    <option>item1</option>
    <option>item2</option>
    <option>item3</option>
    <option>item4</option>
    <option>item5</option>
    </select>

Demo

Answer 3

请参考这个现场演示..Demo.

HTML

    <div>
        Select
        <ul>
            <li><a id="first" href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
        </ul>
    </div>

css

  div { 
        margin: 10px;
        padding: 10px; 
        border: 2px solid purple; 
        width: 200px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }
    #first{
        font-size:25px;

    }
    div > ul { display: none; }
    div:hover > ul {display: block; background: #f9f9f9; border-top: 1px solid purple;}
    div:hover > ul > li { padding: 5px; border-bottom: 1px solid #4f4f4f;}
    div:hover > ul > li:hover { background: white;}
    div:hover > ul > li:hover > a { color: red; }

Answer 4

您可以使用 CSS first-child 来做到这一点。

注意：不适用于 webkit 浏览器。将结构改为ul > li。

Here is the demo

select {
  font-size: 12px
}
select option:first-child {
  font-size: 25px
}

Answer 5

您可以像这样在选项标签中添加一个 id：

<option id="newFont">Some option</option>

然后在css中：

option {
font-size: 12px;
}

option#newFont{
font-size: 25px;
}

Answer 6

使用 css

html

<select id="yourSelect">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

css

 <style>
 #yourSelect > option:first-child
 {
   font-size: 25px;
 }
 </style>

或通过 jquery
jquery

jQuery("#yourSelect option:first-child").css('font-size', '25px');

Answer 7

由于浏览器的限制，我会三思而后行。在这里检查：

http://www.electrictoolbox.com/style-select-optgroup-options-css/

Answer 8

$('select').find('option').eq(0).css({font-size: '25px'});

Answer 9

// #target = your select box id 
// fontSize = your  font size;

$("#target option:first").css('font-size', fontSize);