JSFiddle - React, Tailwind, and code Playground

by Mike Gifford

HTML

<!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>

CSS

/* All select elements on page */
select {
  position: relative;
}

/* Style by class. Effects the text of the contained options. */
.blueText {
  color: #0000FF;
}

/* Style by id. Effects 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;
}