Custom Select Dropdown Styling - Wombat Select

Wombat Select is a select box replacement plugin that applies custom CSS styles to the <select> element while preserving the native select behavior.

Ideal for custom dropdown menu & dropdown list. You can find more dropdown plugins to replace the native select box here.

How to use it:

1. Add the jQuery Wombat Select plugin's JavaScript and Stylesheet to the webpage.

<link rel="stylesheet" href="/path/to/wombat-select.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/wombat-select-jquery.min.js"></script>

2. Attach the function wombatSelect to the existing <select> element and the plugin will take care of the rest.

<select id="select">
  <option value="jquery">jQuery</option>
  <option value="javascript">JavaScript</option>
  <option value="html5">HTML5</option>
  <option value="css3">CSS3</option>
  <option value="python">Python</option>
</select>

$(function(){
  $('#select').wombatSelect();
});

3. Override the default CSS styles of the custom select box.

:root {
  --height: 40px;
  --padding-x: 20px;
  --padding-y: 10px;
  --color: #3c464d;
}

.wombat-select-native {
  border: 0!important;
  clip: rect(0px, 0px, 0px, 0px)!important;
  height: 1px!important;
  margin: -1px!important;
  overflow: hidden!important;
  padding: 0!important;
  position: absolute!important;
  width: 1px!important;
}

.wombat-select {
  box-sizing: border-box;
  color: var(--color);
}

.wombat-select-value {
  padding: var(--padding-y) calc(var(--padding-x)*1.6) var(--padding-y) var(--padding-x);
  cursor: pointer;
  border: 1px solid #c1c1c1;
  border-radius: 2px;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
}

.wombat-select-value:after {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid black;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.wombat-select-dropdown {
  border-radius: 2px;
  background-color: #ffffff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
}

.wombat-select-option {
  padding: var(--padding-y) var(--padding-x);
  border: 1px solid transparent;
  cursor: pointer;
}

.wombat-select-option:hover {
  background-color: #f3f3f3;
}

---

This awesome jQuery plugin is developed by dmtrc. For more Advanced Usages, please check the demo page or visit the official website.