[英]How to change font size of the first option tag in a dropdown menu (select)?
How can I change the font size for the first option tag in a select tag? 我怎样才能更改第一个选项标签的字体大小在选择标签? I've tried changing the CSS for the option:first-child with no luck. 我已经尝试更改CSS的选项:没有运气的第一个孩子。
I would like the first option to have 25px font-size while the other items on the list to have 12px font-size. 我想第一个选项是25px字体大小而列表中的其他项目有12px字体大小。
I've already read tutorials here that can change the font color and font type for the first option, but when I applied font-size on them, it doesn't seem to take effect. 我已经阅读了这里可以更改第一个选项的字体颜色和字体类型的教程,但是当我对它们应用font-size时,它似乎没有生效。
Can this be achieved through CSS or JQuery? 这可以通过CSS或JQuery实现吗? Thanks! 谢谢!
HTML Code: 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>
If this below is the option you want to change the font size in SELECT tag 如果以下是您要更改SELECT标记中的字体大小的选项
<option id="op1">option 1</option>
Place the below code in head element 将以下代码放在head元素中
<script>
document.getElementById("op1").style.fontSize ="25px";
</script>
Please refer to this live demo.. Demo . 请参考这个现场演示.. 演示 。
HTML 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 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; }
CSS 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 HTML
<select>
<option>item1</option>
<option>item2</option>
<option>item3</option>
<option>item4</option>
<option>item5</option>
</select>
you can do it using CSS first-child. 你可以用CSS first-child做到这一点。
Note: Does not works in webkit browser. 注意:在webkit浏览器中不起作用。 Change the structure to ul > li
. 将结构更改为ul > li
。
select {
font-size: 12px
}
select option:first-child {
font-size: 25px
}
You would add an id to the option tag like this: 您可以像这样在选项标签中添加一个id:
<option id="newFont">Some option</option>
And then in the css: 然后在CSS中:
option {
font-size: 12px;
}
option#newFont{
font-size: 25px;
}
use css 用css
html HTML
<select id="yourSelect">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
css CSS
<style>
#yourSelect > option:first-child
{
font-size: 25px;
}
</style>
or by jquery 或者通过jquery
jquery jQuery的
jQuery("#yourSelect option:first-child").css('font-size', '25px');
i will think twice to do like that because of browser limitation. 由于浏览器的限制,我会三思而后行。 Do check here : 请检查这里:
http://www.electrictoolbox.com/style-select-optgroup-options-css/ http://www.electrictoolbox.com/style-select-optgroup-options-css/
// #target = your select box id
// fontSize = your font size;
$("#target option:first").css('font-size', fontSize);
$('select').find('option').eq(0).css({font-size: '25px'});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.