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
and in chrome I get this
yet setting,
does sweet FA...
:/
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...
:/