Overriding browser styles with forms

Phreaddee

Super Moderator
Staff member
in particular i'm trying to override styles on a listbox item particularly the selected and/or checked item.

so I've managed to get the select to not be a dropdown and have no browser attributed styles, and then the option also is styled to my liking. HOWEVER when you select an option it goes blue, and when you move on in the form it goes grey-- as per the browser defaults.

id like both when its selected and in focus, and also when its out of focus for it to be the desired colour, which is just a different colour blue. rgb (0,174,239) to be precise.

ideally a css solution would be preferred, but if it must be js then so be it.

has anyone had any success with this?
(PS I dont give a fuck for IE compatibility)

my head is hurting from trying all the different options I've found via searching to date, and am likely not using the right "keywords" in my search, in any case a solution, or a push in the right direction would be appreciated.

when I inspect the element in firefox is gives me this in the default forms.css file attached to firefox

Code:
option:checked {
background-color: -moz-html-cellhighlight !important;
color: -moz-html-cellhighlighttext !important;
}

select:focus > option:checked,
select:focus > optgroup > option:checked {
background-color: Highlight ! important;
color: HighlightText ! important;
}

and in chrome I get this

Code:
select:-internal-list-box option:checked {
   background-color: -internal-inactive-list-box-selection;
   color: -internal-inactive-list-box-selection-text;
}

yet setting,

Code:
select:-internal-list-box option:checked, 
select:focus > option:checked,
select:focus > optgroup > option:checked,
option:checked {
background-color:rgb(0,174,239) !important;
}

does sweet FA...

:/
 

ronaldroe

Super Moderator
Staff member
The best way to handle customized select boxes is by replacing the select with a custom setup. With a little JS and CSS, you can turn an unordered list or definition list into a select-style box.
 
Top