Not sure if browsers support this feature. It works fine in a div, but that's not very semantically correct.
Here is a rough mockup of what I'm trying to achieve: Mockup Link
/* CSS for select elements on page */
select {
position: relative;
}
/* Style by class. Affects the text color of the contained options. */
.blueText {
color: #0000FF;
}
/* Style by id. Affects the position of the select drop down. */
#styledSelect {
left: 100px;
}
#orange {
color: orange;
}
#apple {
background-image: url("http://icons.iconarchive.com/icons/custom-icon-design/flatastic-7/512/Apple-icon.png");
background-repeat: no-repeat;
background-size: 30px 10px;
}
#cherry {
background-color: red;
}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Select Styling</title>
<link href="selectExample.css" rel="stylesheet">
</head>
<body>
<select id="styledSelect" class="blueText">
<option value="apple" id="apple">Apple</option>
<option value="orange" id="orange">Orange</option>
<option value="cherry" id="cherry">Cherry</option>
</select>
</body>
</html>I want each item in the list to have a country name and flag associated with it. I am attempting to create a country dropdown menu, but I seem to be struggling with the implementation (most likely due to my limited CSS skills).