Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML Dropdown list item background colors

Tags:

html

css

I have a dropdown menu with items and I wanted to use the ODD and EVEN to alternate the colors. My question is...What's the CSS code for styling Dropdown list items please?

like image 200
Satch3000 Avatar asked Jan 21 '23 00:01

Satch3000


1 Answers

Use the CSS nth-child pseudo-class:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>HTML Dropdown list item baground colors</title>
    <style type="text/css">
        #myForm select option:nth-child(odd) {
            color:black;
            background:yellow;
        }
        #myForm select option:nth-child(even) {
            color:white;
            background:blue;
        }
        #myForm select {
            background:green;
            color:orange;
        }
    </style>
</head>
<body>
    <form id="myForm" action="#" method="get">
        <select>
            <option>A</option>
            <option>B</option>
            <option>C</option>
            <option>D</option>
            <option>E</option>
            <option>F</option>
        </select>
    </div>
</body>
</html>
like image 63
Richard JP Le Guen Avatar answered Jan 31 '23 22:01

Richard JP Le Guen