Question

如何更改选择标记中第一个选项标记的字体大小？我已经尝试更改CSS的选项：没有运气的第一个孩子。

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

我已经阅读了这里可以更改第一个选项的字体颜色和字体类型的教程，但是当我对它们应用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

请参阅此实时演示.. 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 3

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

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

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

Answer 9

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

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

9 个答案: