CSS Library For Responsive Select Element Styling

Preview:

Description:

A small CSS library used to beautify the default select element that uses SVGs for the arrow symbol.

How to use it:

Download and then put the pure-css-select-style.css file in the page’s header.

<link rel="stylesheet" href="css/pure-css-select-style.css">

Wrap your normal select element into a DIV container with the CSS class of ‘pure-css-select-style’.

<div class="pure-css-select-style">
  <select>
    <option value="volvo">Lorem ipsum dolor sit amet</option>
    <option value="saab">Consectetur adipisicing</option>
    <option value="mercedes">At molestiae blanditiis</option>
    <option value="audi">corrupti veritatis magni</option>
  </select>
</div>

Add a theme CSS class of your choice to the DIV wrapper. Available themes:

• theme-default
• theme-default-w-line
• theme-square
• theme-rounded
• theme-filled
• theme-gradient

<div class="pure-css-select-style theme-default">
  <select>
    <option value="volvo">Lorem ipsum dolor sit amet</option>
    <option value="saab">Consectetur adipisicing</option>
    <option value="mercedes">At molestiae blanditiis</option>
    <option value="audi">corrupti veritatis magni</option>
  </select>
</div>