css - dropdown (option, select)

I have been able to control the width of the option etc.

However, you know that the selected option gets highlighted by 开发者_C百科making background blue and text-color white by default. That blue background is not covering the entire width of the selected option. The blue background is covering the entire text though. However, I would like it to cover the entire width of the option.

This is how I am setting width of the option and select

option
{
    width:100px;
}
select
{
    width:100px;
}

I'm sorry to say that most browsers won't allow you to do this; forms remain very difficult to style. The background can't extend the full width of its parent element because the browser takes the width of the element's scrollbar into account (regardless of whether or not it's actually there).

You could use Javascript to render replacements that may be styled to your heart's content, however, and there are a great many ways to do it. If you're using jQuery, you might want to look into this compilation of plugins.