[英]Change font-size based on selected option
我希望选项中的第一个孩子具有不同的字体大小。 我正在尝试各种方法,但它没有发生。 到目前为止,我有这个:
JSFiddle: https://jsfiddle.net/2n9cfyo0/1/
我希望它默认以这种方式出现(这是第一个孩子):
但是在选择下拉菜单时将字体大小更改为 24px:
select { -moz-appearance: none; -webkit-appearance: none; appearance: none; padding: 7px 15px; border: 1px solid #333; border-radius: 2px; font-size: 24px; }.target option:first-child { font-size: 12; }
<select class="target"> <option value="">select</option> <option value="1">option 1</option> <option value="2">option 2</option> </select>
我创建了一个jsfiddle来实现所需的相同结果。 它需要javascript
和jquery
才能达到您期望的结果。 将下拉菜单从一种形式更改为另一种形式是Event ,并且 Events 存在于Jquery
中,在您的情况下,我们必须使用.change()
事件。
添加以下 javascript 代码:
$(".target").change(function(){
if (this.value == "2") {
$(this).css({"font-size" : "34px"});
}
});
上面的代码说,当您从下拉列表中选择 select Option 2
时,它会将字体大小更改为34px;
,你可以根据自己的需要修改fiddle:)
$(".target").change(function() { if (this.value == "2") { $(this).css({ "font-size": "34px" }); } });
select { -moz-appearance: none; -webkit-appearance: none; appearance: none; padding: 7px 15px; border: 1px solid #333; border-radius: 2px; font-size: 24px; }.target option:first-child { font-size: 12; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select class="target"> <option value="">select</option> <option value="1">option 1</option> <option value="2">option 2</option> </select>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.