Change css font-family for separate options in select tag
Solution 1:
You should wrap each option tag in an optgroup tag and then style that as:
<select>
<optgroup style="font-family:arial">
<option>Arial</option>
</optgroup>
<optgroup style="font-family:verdana">
<option>veranda</option>
</optgroup>
<optgroup style="font-family:other">
<option>other</option>
</optgroup>
</select>Solution 2:
You cannot set the font of the <option> tag but you could create a list with specific styles (as you would expect)
Here's everything I've been trying:
$("select.js option:eq(0), ul li:eq(0)").css("fontFamily", "tangerine");
$("select.js option:eq(1), ul li:eq(1)").css("fontFamily", "tahoma");
$("select.js option:eq(2), ul li:eq(2)").css("fontFamily", "times new roman");h1 {
font-size: 1.2em;
margin-top: 10px;
color: #777;
}
.tangerine {
font-family: tangerine;
}
.tahoma {
font-family: tahoma;
}
.timesnewroman {
font-family: times new roman;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<h1>Set with jQuery</h2>
<select id="js">
<option>Tangerine</option>
<option>Tahoma</option>
<option>Times New Roman</option>
</select>
<div> </div>
<h1>Set with CSS</h2>
<select id="css">
<option class="tangerine">Tangerine</option>
<option class="tahoma">Tahoma</option>
<option class="timesnewroman">Times New Roman</option>
</select>
<div> </div>
<h1>List</h2>
<ul>
<li>Tangerine</li>
<li>Tahoma</li>
<li>Times New Roman</li>
</ul>Solution 3:
Maybe you can use javascript? Can you try this ?
<script>
myObj = document.getElementById("tahoma");
myObj.style.font = "Tahoma";
myObj.style.color = "red";
// Change anything else that you like!
</script>
<option id="tahoma .....>
Solution 4:
You can simply use like this
<select id='lstFonts' class='form-control'>
<option style="font-family:Arial" value="Arial">Arial</option>
<option style="font-family:Verdana" value="Verdana">Arial</option>
</select>