Question

39

HTML < select> selected option background-color CSS style

rated 0 times [ 41] [ 2] / answers: 1 / hits: 192093 / 15 Years ago, mon, march 8, 2010, 12:00:00

Is there a style for a select option's selected color? For example:

<HTML>

<BODY>

<FORM NAME=form1>

<SELECT NAME=mySelect SIZE=7 style=background-color:red;>

<OPTION>Test 1

<OPTION>Test 2

<OPTION>Test 3

<OPTION>Test 4

<OPTION>Test 5

<OPTION>Test 6

<OPTION>Test 7

</SELECT>

</FORM>

</BODY>

</HTML>

When I select an option it turns blue, I want to override this and
make it a different color. In the style I expected something like
selected-color, but it doesn't exist.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

daja

Add To Favorites

Follow

Total Points: 407

Total Questions: 103

Total Answers: 103

Location: Ghana

Member since Sun, Mar 27, 2022

2 Years ago

daja questions

1 How to delete a file in antd Upload component

Tue, Dec 21, 21, 00:00, 2 Years ago

1 map() with async vs promise.all()

Thu, Apr 23, 20, 00:00, 4 Years ago

1 React useEffect (with []) is called every time I change page (React Router)

Fri, Oct 25, 19, 00:00, 5 Years ago

1 Detect URL change in querystring

Fri, Sep 6, 19, 00:00, 5 Years ago

1 How to query relations with Knex.js?

Tue, Jul 23, 19, 00:00, 5 Years ago

View All

answered 15 Years ago anabellejaynav · Accepted Answer

You may not be able to do this using pure CSS. But, a little javascript can do it nicely.

A crude way to do it -

var sel = document.getElementById('select_id');

sel.addEventListener('click', function(el){

    var options = this.children;

    for(var i=0; i < this.childElementCount; i++){

        options[i].style.color = 'white';

    }

    var selected = this.children[this.selectedIndex];

        selected.style.color = 'red';

    }, false);