Cross-platform Custom Select Boxes with Pure CSS – Select.css

Author: filamentgroup
Views Total: 1,897 views
Official Page: Go to website
Last Update: June 29, 2017
License: MIT


Cross-platform Custom Select Boxes with Pure CSS – Select.css


select.css is a lightweight CSS library used to consistently style the native select element consistently on most popular devices like iOS, Android, Kindle, Windows Phone, Desktop browsers and much more.

How to use it:

Load the required select.css in the head section of the document.

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

Wrap your regular select elements in a container with CSS class of ‘custom-select’.

<div class="button custom-select">

Add custom styles to the select. Override the styles 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 */


v2.0.3 (06/29/2017)

See also  CSS Extension To Fix Bootstrap Table In Card Issue

Leave a Reply

Your email address will not be published. Required fields are marked *