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
Related
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>
I am trying to get font from google for one of my project.
Font is working perfectly, but for <select> font is not coming.
Any idea how to apply font for select, option in jsf?
I tried in style, by making class etc... but nothing is working.
Below is what I have in source code even when I have select {font-family: 'fontName'}
<select name="j_idt205" size="1">
<option value="Any" selected="selected">Any</option>
<option value="Muslim">Muslim</option>
<option value="Christian">Christian</option>
<option value="Others">Others</option>
</select>
Main Problem
In FF, its proper, but in Chrome, its default Chrome font.
Any idea why this is happening?
Upon further investigation, I found this is happening with MAC Chrome and Safari only. This is just driving me crazy!!!
implement font-family on select
http://jsfiddle.net/sTPFY/
select {font-family:fontname}
Is it possible to dynamicaly resize the visible options in select tag in forms? I have the example:
<select size="1">
<option value='1'>1
<option selected value='2'>2
<option value='3'>3
<option value='4'>4
</select>
I would like to have visible all options (to setup size dynamically with css) when design page for printing. And also to see selected option(s) in another design (color, bold ...). For resize I tried:
select{
size:4;
}
but it doesn't work. I need a working solution at least for FF, IE, Safari ...
Do have any idea?
Thanks in advance!
You can use this way:
<select size="1" size="4">
<option value='1'>1</option>
<option selected value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
</select>
And don't forget to close the </option>
I am using the Ubuntu font from Google fonts in my project. Unfortunately when using the fonts, Firefox does not show the right border of selects/dropdowns.
I have created a fiddle, check it out with Firefox.
Relevant code
<link
href="http://fonts.googleapis.com/css?family=Ubuntu"
rel="stylesheet" type="text/css" />
<style>
input, textarea, select, span
{
font-family: 'Ubuntu' , sans-serif !important;
font-size: 13px;
}
</style>
<span>Some text to show that the font is indeed in use</span>
<br />
<select name="testSelect" id="testSelect">
<option value="1">1</option>
<option selected="selected" value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
Please set width selects/dropdowns.
As much as this might not be the answer you're looking for, in general, I try to avoid styling <select> elements directly. What properties 'take' in one browser versus another seems to vary widely, so it never seems to work correctly. For instance, I checked your jsFiddle out in Chrome, and the drop down ignored your Ubuntu font declaration altogether. That's just how Chrome rolls.
So, my suggestion would be to remove the styling for select in your stylesheet and just let the browsers do their thing. The upshot of this approach is that a user will get a drop down that they are familiar with in their browser.
All that said, if you REALLY need to style a drop down, there are methods out there for basically hijacking a <select> element with javascript, and replacing it with a bunch of divs. I like the Chosen library for this sort of thing. As it renders <div>'s on the page, you can style those to your heart's content.
For styling disabled elements I used:
[disabled] { /* Text and background colour, medium red on light yellow */
color:#933;
background-color:#ffc;
}
It's work perfectly in all browsers except Chrome. Is there exists a way to overcome this using css without classes, because I have a huge amount of elements on different pages and don't want to change it all.
Thanks in advance.
UPDATE
After some investigation I have realized that this can be reproduced only if client has a server OS like Windows 2008 and use only Chrome browser. But I hope its a rear condition in real life.
It seems to be working just fine using Chrome 15.
input[disabled] {
color: #933;
background-color: #ffc;
}
Make sure you´ve cleared any cached style sheets.
Created a jsFiddle.
UPDATE
Noticed your question title and updated the example.
It´s seems to be a known issue for Chrome in Windows, see Style disabled multiple select – google chrome
The code below is works for me (style the option colors not select box itself):
<select multiple="multiple" disabled="disabled">
<option style="color:#CCCCCC;" value="1" selected>Monday</option>
<option style="color:#CCCCCC;" value="2" selected>Tuesday</option>
<option style="color:#CCCCCC;" value="3">Wednesday</option>
<option style="color:#CCCCCC;" value="4">Thursday</option>
<option style="color:#CCCCCC;" value="5">Friday</option>
<option style="color:#CCCCCC;" value="6">Saturday</option>
<option style="color:#CCCCCC;" value="7">Sunday</option>
</select>