如何更改下拉菜單中第一個選項標籤的字體大小（選擇）？

如何更改第一個選項的字體大小標籤選擇標籤？我試過改變CSS的選項：第一個孩子沒有運氣。如何更改下拉菜單中第一個選項標籤的字體大小（選擇）？

我希望第一個選項具有25px的字體大小，而列表中的其他項目具有12px的字體大小。

我已經閱讀過這裏的教程，可以更改第一個選項的字體顏色和字體類型，但是當我在它們上應用字體大小時，它似乎不起作用。

這可以通過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>

來源

2014-03-19 hello

請提供您的代碼 – airi

你問這個答案http://jsfiddle.net/D58Rz/ – ShibinRagh

@airi的HTML代碼編輯。 – hello

如果這是下面要更改字體大小在SELECT標籤選項

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

地方下面的代碼在頭元件

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

來源

2014-03-19 06:12:13 shubhraj

嗨，我試過這個，但它繼承了12px，即使我在頭部添加jquery。 – hello

''' 選項'' '的 – shubhraj

上面應該工作... – shubhraj

將添加一個id爲選項標籤是這樣的：

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

然後在CSS：

option { 
font-size: 12px; 
} 

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

來源

2014-03-19 06:05:11

試過這個，不適合我。也許你可以通過jsfiddle來幫助我，所以我可以看到？謝謝您的幫助！ – hello

你是對的！我不應該假設。我一直在看其他線程，看起來使用'select選項[val =「1」]'選擇器可以在舊版瀏覽器上運行，但不能在最新版本的Chrome瀏覽器中運行。我會繼續尋找解決方案！ –

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

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

來源

2014-03-19 06:06:06

這有什麼問題？ –

-1完全沒有...但它是一個可怕的解決方案，使用jQuery的東西，可以實現與css – Leo

@leo但-1這是正當的？它是一個jQuery解決方案 –

請參考這個現場演示.. 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; }

來源

2014-03-19 06:06:29

嗨，謝謝。但即時修改選擇標籤中的選項標籤，而不是ul中的li。 – hello

好的..很高興幫助你的朋友！ ;）也可以接受的答案 –

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

來源

2014-03-19 06:08:17 Kyo

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

來源

2014-03-19 06:13:15

，只有第一個選項改變了顏色，而不是尺寸。 Chrome中的所有選項字體大小都相同。 – hello

與@hello相同的體驗 - 顏色不同但字體大小完全相同 – dlchambers

使用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');

來源

2014-03-19 06:14:03 chriz

你可以使用CSS第一個孩子。

注意：不適用於webkit瀏覽器。將結構更改爲ul > li。

Here is the demo

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

來源

2014-03-19 06:18:13 Tushar

我使用的是Chrome，所有選項字體都具有相同的大小。 – hello

是啊！它不在鉻中工作。這是webkit瀏覽器中的一個已知問題。我建議你把結構改成ul> li。 – Tushar

這應該是答案。 –

我會考慮做兩次這樣的，因爲瀏覽器的限制。不要點擊這裏：

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

來源

2014-03-19 06:43:18 airi

這就是爲什麼我問，如果有jQuery解決方案，如果CSS不會能夠做到這一點 – hello

@Bernie你有沒有試過jQuery的方式？ –

如何更改下拉菜單中第一個選項標籤的字體大小（選擇）？

回答

相關問題