i've used a stylesheet to change the background colours of a select tag, like so:
<select class = "SelectColour">
<option value = "White" class = "White">White</option>
<option value = "Blue" class = "Blue">Blue</option>
<option value = "Red" class = "Red">Red</option>
</select>
and these are styled as:
.SelectColour.White
{
background-color: white;
}
.SelectColour.Blue
{
background-color: Blue;
}
.SelectColour.Red
{
background-color: red;
}
but i was wondering if there's any way of changing the mouseover colour of an option. i've tried using :hover but that hasn't worked, and it seems daft changing the background colour if its going to change to blue when the mouse is over it.
thanks for the help.Try this (untested):
<script type="text/javascript"><!--
default="white";
function colour(opt){
opt.style.backgroundColor=opt.value.toLowerCase();
}
function clean(opt){
opt.style.backgroundColor="transparent";
}
//--></script>
</head>
<body>
<form action="#">
<select>
<option value = "White" onmouseover="colour(this);" onmouseover="clean(this);">White</option>
<option value = "Blue" onmouseover="colour(this);" onmouseover="clean(this);">Blue</option>
<option value = "Red" onmouseover="colour(this);" onmouseover="clean(this);">Red</option>
</select>
<select class = "SelectColour">
<option value = "White" class = "White">White</option>
<option value = "Blue" class = "Blue">Blue</option>
<option value = "Red" class = "Red">Red</option>
</select>
and these are styled as:
.SelectColour.White
{
background-color: white;
}
.SelectColour.Blue
{
background-color: Blue;
}
.SelectColour.Red
{
background-color: red;
}
but i was wondering if there's any way of changing the mouseover colour of an option. i've tried using :hover but that hasn't worked, and it seems daft changing the background colour if its going to change to blue when the mouse is over it.
thanks for the help.Try this (untested):
<script type="text/javascript"><!--
default="white";
function colour(opt){
opt.style.backgroundColor=opt.value.toLowerCase();
}
function clean(opt){
opt.style.backgroundColor="transparent";
}
//--></script>
</head>
<body>
<form action="#">
<select>
<option value = "White" onmouseover="colour(this);" onmouseover="clean(this);">White</option>
<option value = "Blue" onmouseover="colour(this);" onmouseover="clean(this);">Blue</option>
<option value = "Red" onmouseover="colour(this);" onmouseover="clean(this);">Red</option>
</select>