I've done a bit of searching and come up with a few threads on changing the background color of an option in a select box but nothing on how one might be able to change the font style on a per option basis.
I am currently using the following set, which works fine for coloring but if I add font-weight:bold; into the select.highlight selector it does nothing (it still colors the options but does not make the text bold)
<style type="text/css">
select {
width:100px;
}
select.highlight {
background-color:red;
}
</style>
<select name="choos">
<option class="highlight" value="1">One</option>
<option value="2">Two</option>
<option class="highlight" value="3">Three</option>
<option value="4">Four</option>
</select>
Any ideas? Answers on a postcard
I guess you can't change the font-family or style of an option in a select object... Yes, you can change the (background)color of the option, but you can't change something of the font...You do not have class="highlight" in your select.Ooops, typo. There was supposed to be a space between the "select" and the ".highlight".There is no class in your select. That is why it doesn't work.Ah, so you can't change the font on a per option basis?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>DOM table</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
select {
width:100px;
background:red;
font : bold larger Algerian;
}
option.highlight {
background-color:green;
}
</style>
</head>
<body>
<select name="choos">
<option class="highlight" value="1">One</option>
<option value="2">Two</option>
<option class="highlight" value="3">Three</option>
<option value="4">Four</option>
</select>
</body>
</html>
I am currently using the following set, which works fine for coloring but if I add font-weight:bold; into the select.highlight selector it does nothing (it still colors the options but does not make the text bold)
<style type="text/css">
select {
width:100px;
}
select.highlight {
background-color:red;
}
</style>
<select name="choos">
<option class="highlight" value="1">One</option>
<option value="2">Two</option>
<option class="highlight" value="3">Three</option>
<option value="4">Four</option>
</select>
Any ideas? Answers on a postcard
I guess you can't change the font-family or style of an option in a select object... Yes, you can change the (background)color of the option, but you can't change something of the font...You do not have class="highlight" in your select.Ooops, typo. There was supposed to be a space between the "select" and the ".highlight".There is no class in your select. That is why it doesn't work.Ah, so you can't change the font on a per option basis?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>DOM table</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
select {
width:100px;
background:red;
font : bold larger Algerian;
}
option.highlight {
background-color:green;
}
</style>
</head>
<body>
<select name="choos">
<option class="highlight" value="1">One</option>
<option value="2">Two</option>
<option class="highlight" value="3">Three</option>
<option value="4">Four</option>
</select>
</body>
</html>