Style HTML select and option tags

Question

I have found that I can stylize option elements with a little CSS3. I am trying to control the background of elements that are active during a mouseover event. I have used the :hover selector effectively to control this functionality. However, when my mouse leaves the option group the font is still white. Is there any way I can control this?

option
{
    background-image: -webkit-gradient(     linear,     left bottom,     left top,     color-stop(0, rgb(237,233,233)),     color-stop(1, rgb(255,255,255)) );
    background-image: -moz-linear-gradient(     center bottom,     rgb(237,233,233) 0%,     rgb(255,255,255) 100% );
    color:#333333;
}
option:hover
{
    background-image: -webkit-gradient(     linear,     left bottom,     left top,     color-stop(0, rgb(20,26,85)),     color-stop(1, rgb(137,145,192)) );
    background-image: -moz-linear-gradient(     center bottom,     rgb(20,26,85) 0%,     rgb(137,145,192) 100% );
    color:#FFFFFF;
}

I don't know of any way to control the font color of the active element. This is not necessarily the selected element either.

sumit kumar ray sumit kumar ray · Accepted Answer · 2011-12-30T09:22:15

If you are doing this for anchor tag please define the class in this Mainer:

.option a{
background-image: -webkit-gradient(     linear,     left bottom,     left top,     color-stop(0, rgb(237,233,233)),     color-stop(1, rgb(255,255,255)) );
background-image: -moz-linear-gradient(     center bottom,     rgb(237,233,233) 0%,     rgb(255,255,255) 100% );
color:#333333;
}

.option a:hover{
background-image: -webkit-gradient(     linear,     left bottom,     left top,     color-stop(0, rgb(20,26,85)),     color-stop(1, rgb(137,145,192)) );
background-image: -moz-linear-gradient(     center bottom,     rgb(20,26,85) 0%,     rgb(137,145,192) 100% );
color:#FFFFFF;
}

It will Work fine. When you will moreover on a tag then you will see the hover thing after mouseout form that link that become normal as you are using color black.

If you are using for any other tag please use in same Mainer

Style HTML select and option tags

1 Answers