Cross-browser Styles for Consistent Select Element Styling

select-css is a cross-browser CSS select element for styling a fixed select element. Most popular devices like iOS, Android, Kindle, Windows Phone, desktop browsers, and more.

custom select dropdown css only, select dropdown css style examples, css style select option dropdown, select css styling, select option css not working

How to make use of it:

1. Load the required select.css in the header section of the document.

<link rel="stylesheet" href="src/select.css">

2. Wrap the usual selection elements in a container with the CSS class of Custom Select.

<div class="button custom-select">
  <select>
    <option>Apples</option>
    <option>Bananas</option>
    <option>Grapes</option>
    <option>Oranges</option>
  </select>
</div>

3. Add custom styles for selection. Override the patterns as you like.

.button {
  border: 1px solid #bbb;
  border-radius: .3em;
  box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
  background: #f3f3f3; /* Old browsers */
  background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #e5e5e5)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* IE10+ */
  background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%); /* W3C */
}

Cross-platform Custom Select Boxes, select-css Plugin/Github