Overriding browser styles with forms

Discussion in 'Web Design' started by Phreaddee, Aug 3, 2015.

to remove all ads.
  1. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    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...

    :/
     
  2. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,639
  3. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    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.
     

Share This Page