下拉菜单选择了与其他字体不同的选项
dropdown menu selected option different font to others
基本上我有一个下拉菜单:
<select id='getbusornew' style="font-size:14px;" >
<option value='News'>
BBC News
</option>
<option value='Business' >
Business News
</option>
</select>
如何为已选择的选项设置单独的样式。因此,所选的字体大小与未选择的字体大小不同。选择另一个时,它具有选定的字体大小,而未选择的字体大小为未选定的
您可以使用:checked
psuedo类在<select>
中指定当前选定的<option>
。
所以你的CSS可能看起来像这样:
#getbusornew option {
font-size: 16px;
}
#getbusornew option:checked {
font-size: 18px;
}
我在这里写了一个关于JSBin的快速示例:http://jsbin.com/nohovaqikafe/1/edit
您可以这样做。在选择一个选项时,添加一个特定的类。
$("#getbusornew :selected").addClass("selected");
$("#getbusornew").change(function(){
$(".selected").removeClass("selected");
$("#getbusornew :selected").addClass("selected");
});
css
.selected
{
font-size:20px;
color:red;
}
演示
Option标记已选定属性(如果已选定)。
因此,您可以为此编写特殊的CSS。
相关文章:
- 内部分区字体大小获胜'调整浏览器窗口大小时不会随媒体查询而更改
- 我的单元测试选项是什么
- 如何更改bigquery API中的计费层选项
- 使用Javascript获取所选选项ID
- Selectize.js:如何对整数值的选项进行排序
- 通过js在新选项卡中有条件地打开url
- 按照选项卡索引的顺序循环一个jQuery选择
- 用Javascript更改我网站上的字体大小
- 如何在使用selectBoxIt JQuery插件时检测选项更改
- 无法在Ionic select中预先选择最后一个选项
- PhoneGap选项卡栏自定义字体,背景图案
- 如何在tinymce编辑器中启用字体系列和颜色选项
- 更改移动web应用程序的字体大小选项
- 更改所见即所得编辑器上的字体大小选项
- 在脚本选项中更改字体
- 增加选项卡式导航中文本的字体大小
- 更改从存储加载选项的下拉dojo的字体大小
- 下拉菜单选择了与其他字体不同的选项
- 选择具有不同字体系列的列表选项-如何做到这一点
- 选择选项字体系列在MAC os(chrome和safari浏览器问题)和windows safari浏览器问题中不工作