These questions are similar but not the same or are very outdated:
HTML font weight property on OPTION of HTML SELECT
How to style the option of an html "select" element?
How can I change the font-size of a select option?
The goal is to style different options of the same select menu with different font-weights. We only need to support modern browsers.
This code doesn't work, even though answers on Stack Overflow and elsewhere suggest it should in modern browsers like Chrome.
Here's an example of what it looks like when using the answer from #gravgrif, which shows all the options styled the same:
Another alternative that did not help was bundling each option in an optgroup, and styling the optgroup.
<select class="weightMenu" title="Bold options available">
<option value="200" style="font-weight:200">B</option>
<option value="300" style="font-weight:300">B</option>
</select>
The goal is to use native HTML and CSS. No plug-ins.
Although your code works fine - you should move the styles to the CSS rather than inline styling. Note - i made the font weights greater to show the differences better.
.weightMenu option:nth-child(1) {
font-weight:400;
}
.weightMenu option:nth-child(2) {
font-weight:700;
}
.weightMenu option:nth-child(3) {
font-weight:900;
}
<select class="weightMenu" title="Bold options available">
<option value="200">A</option>
<option value="300">B</option>
<option value="400">C</option>
</select>
Using bigger font weight may solve this issue.
This is because lower values for font-weight looks the same.
<select class="weightMenu" title="Bold options available">
<option value="400" style="font-weight:400">A</option>
<option value="700" style="font-weight:700">B</option>
<option value="800" style="font-weight:800">B</option>
</select>
Related
I have a select element which looks like this:
<div class="input-field container">
<select>
<option selected>Roboto</option>
<option>Kalam</option>
<option>Karma</option>
<option>Montserrat</option>
</select>
</div>
Now, for every one of them, I want to change the font family to what the actual inner html is, to give a preview of the font you're about to select.
But putting styles directly on the option doesn't work for me.
I found a solution targeting all options from css, however, that wouldn't enable me to achieve the wanted behaviour.
Any suggestions?
Thanks!
I tried with CSS, but didn't seem to work.
You can use javascript to set the style same as the option's value with the style attribute:
document.querySelectorAll(".selectFont option").forEach(function(el){
el.style.fontFamily = el.value;
})
<div class="input-field container">
<select class="selectFont">
<option value="monospace" selected>monospace</option>
<option value="Arial" >Arial</option>
<option value="sans-serif" >sans-serif</option>
</select>
</div>
This is quite old, but I had the exact same problem - I also wanted to change the font family for text in materialize select options, but after much css manipulation I could not get it to work.
I finally found this answer by wahmal - if you add the class 'browser-default' to your select element, it will remove the materialize styling. You can then change the font family of the options. (That said, it won't look like a materialize element any longer if you do this.) Example:
<div>
<select class="browser-default" id="font-dropdown">
<option selected style="font-family: 'courier';">courier</option>
<option style="font-family: 'arial;'">arial</option>
<option style="font-family: 'Verdana;'">Verdana</option>
</select>
<label>Font</label>
</div>
I did not need !important to get it to work. Hope this helps someone.
https://materializecss.com/select.html
I am trying to change the font size of select option elements.
on my development server, my browser is firefox 52.0.2. here it shows fine. please see the below image:
Number-1: it get the font size from select style and works fine.
Number-2: it get the font size, and color from option element style and also works fine.
but when I test live on another computer where the firefox version is 57.0.1. it is showing like below image:
Note: you see? only color changes work but font size/family is not :(
this is the code I am trying:
<Select name="GurdianRelation" id="GurdianRelation" style="font-family:scUniFont1; font-size:24px; line-height:normal; text-align:left; width:300px;">
<option value="00" selected disabled hidden>অনুগ্রহপূর্বক নির্বাচন করুন</option>
<option value="01" style="color:#F00; font-size:32px;">পিতা/মাতা</option>
<option value="02">ভাই/বোন</option>
<option value="03">দাদা/দাদী</option>
<option value="04">নানা/নানী</option>
<option value="05">চাচা/চাচী</option>
<option value="06">ফুফু/ফুফা</option>
<option value="07">মামা/মামী</option>
<option value="08">খালা/খালু</option>
<option value="09">অন্যান্য</option>
</Select>
I have tried following so solution, none of them works:
select option font-size
Change HTML dropdown option font size
so, I am out of ways now.. and expecting some help :)
thanks in advance
best regards
How can I format <select>'s <option> element? Currently we have to use some plugins, like select2, or chosen, or selectboxit, or selectizr.
These js files are big size if we only need to modify UI of <select>'s <option> element, and don't need to use these libraries other features like, tagging, search etc.
I was able to remove <select>'s arrow so I can use any custom arrow or not. check it at :
How can I hide a <select> arrow in Firefox 30+?
But I did't find any option for improving presentation of elements.
About the most you can do is to color the text and change the background-color.
<select>
<option style="background-color: red;">Opt 1</option>
<option style="background-color: green; color: white;">Opt 2</option>
<option style="background-color: blue; color: white;">Opt 3</option>
</select>
You can try applying additional styles, but it's not a standard thing to do. Some browsers will even ignore styling applied to the select and option tags.
I have come across a strange CSS issue.
I have a drop down selector like this HTML markup:
<select id="cat_p" name="cat_p" onchange="ListChildCategories(this.options[this.selectedIndex].value, 0);" class="required validate-list">
<option value="-1" selected="selected">- Choose a category</option>
<option value="1">Category 1</option>
<option value="2">Category 2</option>
<option value="3">Category 3</option>
<option value="4">Category 4</option>
<option value="5">Category 5</option>
</select>
Now, I want to hide one of these select option (let´s say Category 5) using CSS, so I use this CSS code:
select#cat_p option[value="5"] {
display: none;
}
And the result is perfect in Chrome and Firefox, but in Safari and IE this CSS does not work.
I have checked in Safari developers panel and I can see that the CSS is registered as valid and it is not "crossed out" / overwritten by other CSS, so it should work, I would think.. very weird..
Does anyone have a clue what the problem is here?
I made a fiddle so you can see the problem first hand:
http://jsfiddle.net/wH8kF/
You can not use toggle or display:none property or the hide/show with select option in the Safari browser. It is working for all other browsers like Chrome, Firefox, etc. This is part of a long and inconsistent tradition with Safari restricting CSS styling functionality on form elements, believing the visual language of interactive elements should be consistent with the OS (no point trying to find a rationale for IE's failings).
Your only options are either to remove it (and re-append it later), or to set it to optnz.disabled = true. Sorry for the bad news!
I have the following html code
<select id="WageBenifits_PayType" name="WageBenifits.PayType">
<option class="selectOption" value="" selected="selected">Please Select Value</option>
<option value="COM">COM - COMMISSIONS AND BONUS PAY</option>
<option value="HOL">HOL - HOLIDAY PAY</option>
</select>
With the following css
.selectOption {
color: #999;
font-style : italic;
text-transform: none;
font-variant: small-caps; }
My problem is that this works as expected in IE8, but in FF5, adding the css class "selectOption" doesn't affect the styling. In Firebug, I can see that the class has been selected and applied to the item. However, it doesn't change the displayed text in the select dropdown control. It is changed in the dropdown list, but not in the display line.
See demo at http://jsfiddle.net/photo_tom/vRZCr/
Well, CSS issue aside, this is actually what you want:
<select id="WageBenifits_PayType" name="WageBenifits.PayType">
<option disabled="disabled">Please Select Value</option>
<option value="COM">COM - COMMISSIONS AND BONUS PAY</option>
<option value="HOL">HOL - HOLIDAY PAY</option>
</select>
http://jsfiddle.net/AlienWebguy/vRZCr/1/
What's shown in the display line in Firefox is not actually the option; it's just the text from the option. You can test this by injecting elements with styling as kids of the <option> and seeing the styling from those not show up in the display line.
Some browsers hack things in where some (but not all!) of an <option>'s styles are applied to the display line. We've been considering doing something like that in Gecko, but given the complete lack of browser interop here we'd rather have a spec for how things should behave before rocking the boat with changes to behavior.