CSS Library For Responsive Select Element Styling

Category: CSS & CSS3 , Form | April 4, 2016
Author: carloscabo
Views Total: 5,959
Official Page: Go to website
Last Update: April 4, 2016
License: MIT

Preview:

CSS Library For Responsive Select Element Styling

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>

You Might Be Interested In:


Leave a Reply