1

I've got a select with options: 

<select  style="display: inline-block;" class="shs-select form-select  shs-select-level-1" size="10"  id="edit-shs-term-node-tid-depth-select-1">
<option value="0">- None -</option>
<option value="87">a</option>
<option value="88">b</option>
<option value="89">c</option>
<option value="95">d</option>
<option value="90">e</option>
</select>

Hohe can i Remote the Blue highlighting of an Option, in that one is selected?

Thanks for your answers.

Niaker
  • 45
  • 2
  • 8
  • It's not possible. A painless, quick and easy search found this: http://stackoverflow.com/questions/17740391/change-select-list-option-background-colour-on-hover-in-html – Wes Foster Jul 22 '15 at 17:53

1 Answers1

2

Some browsers like Chrome use an outline by default. You can disable this by removing it.

select {
    outline: none;
}


.no-outline {
    outline: none;
}
<div>
    <strong> Outline </strong>
    
    <select>
        <option> A </option>
        <option> B </option>
        <option> C </option>
    </select>    
</div>

<div>
    <strong> No Outline </strong>

    <select class="no-outline">
        <option> A </option>
        <option> B </option>
        <option> C </option>
    </select>
</div>

If you're referencing the actual option display when the select is open, as mentioned in the comments, it's not currently possible.

This is browser specific, but in most instances, the combo box display for select inputs are actually represented with native OS controls, thus most CSS styles applied to option are ignored.

A fix to this problem is to use a third party library to emulate a combo box using HTML/CSS. This is often discouraged because the native select implementation in most cases will perform better from a UX side of things.

Austin Brunkhorst
  • 20,704
  • 6
  • 47
  • 61