JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<script src="http://themes.vivantdesigns.com/cleanslate/js/jquery.uniform.min.js"></script>
<link rel="stylesheet" href="http://themes.vivantdesigns.com/cleanslate/css/jquery.uniform.css">
<input type="checkbox" value="yes"/>

<button>Button</button>

<input type="button" value="input button"/>

<select>
    <option>Option1</option>
    <option>What about very long options?</option>
    <option>Option3</option>
</select>

CSS

.selector {
    background-color: #EEE;
    background-image: url(../../svg.php?from=%23FEFEFE&to=%23EEE);
    background-image: -o-linear-gradient(top, #FEFEFE, #EEE);
    background-image: -ms-linear-gradient(top, #FEFEFE, #EEE);
    background-image: -moz-linear-gradient(top, #FEFEFE, #EEE);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FEFEFE), to(#EEE));
    background-image: -webkit-linear-gradient(top, #FEFEFE, #EEE);
    background-image: linear-gradient(top, #FEFEFE, #EEE);
    border-color: #AAA;
    -moz-box-shadow: inset 0 1px 0 #FFF, 0 1px 3px rgba(0,0,0,0.15);
    -webkit-box-shadow: inset 0 1px 0 #FFF, 0 1px 3px rgba(0,0,0,0.15);
    box-shadow: inset 0 1px 0 #FFF, 0 1px 3px rgba(0,0,0,0.15);
    color: #111;
    text-shadow: 0 1px 0 #FFF;
}

.lte8 .selector {
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#FEFEFE,endColorstr=#EEEEEE);
    zoom: 1;
}

.selector:hover,
.selector.hover {
    background-color: #F2F2F2;
    background-image: url(../../svg.php?from=%23FFF&to=%23F2F2F2);
    background-image: -o-linear-gradient(top, #FFF, #F2F2F2);
    background-image: -ms-linear-gradient(top, #FFF, #F2F2F2);
    background-image: -moz-linear-gradient(top, #FFF, #F2F2F2);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#F2F2F2));
    background-image: -webkit-linear-gradient(top, #FFF, #F2F2F2);
    background-image: linear-gradient(top, #FFF, #F2F2F2);
    border-color: #888;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.lte8 .selector:hover,
.lte8 .selector.hover {
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF,endColorstr=#F2F2F2);
    zoom: 1;
}

.selector:focus,
.selector.focus {
    background-color: #EEE;
    background-image: url(../../svg.php?from=%23FEFEFE&to=%23EEE);
    background-image: -o-linear-gradient(top, #FEFEFE, #EEE);
 ...

JavaScript

$("select").uniform();