I would like the first-child in the option to have a different font-size. I'm trying various methods but it isn't happening. So far, I've got this:
JSFiddle: https://jsfiddle.net/2n9cfyo0/1/
I want it to appear this way by default (this is the first-child):
but change the font-size to 24px when the dropdown is chosen:
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>
I've created a jsfiddle to achieve the same result that is required. It would require javascript
& jquery
to achieve the result you're expecting. Changing the dropdown from one form to another is an Event , and Events exists in Jquery
, in your case, we've to use .change()
event.
Add the below javascript code:
$(".target").change(function(){
if (this.value == "2") {
$(this).css({"font-size" : "34px"});
}
});
the above code says that when you select Option 2
from the dropdown, it would change the size of font to 34px;
, you can modify the fiddle according to your needs:)
$(".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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.