Struggling to create a dropdown list for users to choose colors with each option displaying the selected color as its background. To showcase this concept, I've put together a simple HTML page:
<!DOCTYPE html>
<html>
<head>
<style media="screen" type="text/css">
.white {background-color:white;}
.red {background-color:red;}
.yellow {background-color:yellow;}
.green {background-color:green;}
</style>
</head>
<body>
<h2>Choose Color</h2>
<select>
<option class="white">This should have a WHITE background</option>
<option class="red">This should have a RED background</option>
<option class="yellow">This should have a YELLOW background</option>
<option class="green">This should have a GREEN background</option>
</select>
</body>
</html>
Viewing this on Firefox in either PC or Mac looks fantastic, but Chrome on Mac fails to display the background colors properly. Check out the screenshot after it's rendered in Chrome and I click on the select object:
https://i.sstatic.net/GwPoF.png
The list appears usual with gray backgrounds instead of the designated colors, despite having the correct classes assigned. Though I've referenced various resources on this topic like links, none seem to solve my problem.
Where could I be going wrong? Appreciate any help!