jQuery UI custom selectmenu

Example of a customized rendering of jQuery UI selectmenu.

by ltdeta

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<select style="width: 100px;">
  <option value="red">Red</option>
  <option value="orange">Orange</option>
  <option value="green">Green</option>
  <option value="Blue">Blue</option>
</select>

CSS

.circle {
  border-radius: 50%;
  display: inline-block;
  height: 12px;
  margin-right: 6px;
  width: 12px;
}

JavaScript

// render custom selectmenu
$('select').selectmenu();