How to avoid change the font color when focus out in selectBox options?

Question

Here is the code I tried,

<select size="10">
        <option value="1">one</option>
        <option value="2">two</option>
        <option value="3">three</option>
        <option value="3">four</option>
        <option value="3">five</option>
        <option value="3">six</option>
        <option value="3">seven</option>
</select>

option:checked {
    background: #84c0ff linear-gradient(0deg, #84c0ff 100%, #84c0ff 100%);
    color: red
}

What I want to do is I want to avoid the color change when focus out. In this example you can see text are black, when click the text it will be white. That is want to avoid. (everytime text color want to be black)

For example I set the black color to change when click the text

How can I do this?

option:checked {
    background: #84c0ff linear-gradient(0deg, #84c0ff 100%, #84c0ff 100%);
    color: red
}

<select size="10">
        <option value="1">one</option>
        <option value="2" selected>two</option>
        <option value="3">three</option>
        <option value="3">four</option>
        <option value="3">five</option>
        <option value="3">six</option>
        <option value="3">seven</option>
      </select>

score 0 · Answer 1 · answered Mar 03 '21 at 08:33

I've done some searching on this question and it looks as though this is not possible. How to change colour of blue highlight on select box dropdown

If this is an absolute must I would start looking into building a completely beskpoke selection feature outside of the input scope.

How to avoid change the font color when focus out in selectBox options?

Here is the code I tried,

1 Answers1