JSFiddle - React, Tailwind, and code Playground

by adamco

HTML

<script src="http://adam.co/lab/jquery/customselect/jquery.customSelect.latest.min.js"></script>
<select class="styled">
    <option value="">choose preset...</option>
    <option value="one">two</option>
    <option value="two">something</option>
    <option value="three">4</option>
    <option value="four">5</option>
</select>

CSS

span.customSelect { 
    font:12px sans-serif;
    background:#fff url(http://i48.tinypic.com/2u7rpec.png) right center no-repeat;
    border:1px solid #ddd;
    color:#555;
    padding:7px 9px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px 2px;
    width:175px;
}
.customSelect.customSelectHover {
    border-color:#c7c7c7;
    background-color:#f5f5f5;
}
.customSelect.customSelectFocus {
    border-color:Orange;
}
.customSelect.customSelectOpen {
    border-color:OliveDrab;
}

.customSelect.customSelectChanged {
	-webkit-animation: changed 0.5s;
	-moz-animation: changed 0.5s;
	-ms-animation: changed 0.5s;
	animation: changed 0.5s;
}

@-webkit-keyframes changed {
	0%, 100%{
		-webkit-box-shadow: 0px 0px 14px 5px rgba(151, 67, 159, 0);
		box-shadow: 0px 0px 14px 5px rgba(151, 67, 159, 0);
	}
	50%{
		-webkit-box-shadow: 0px 0px 14px 5px rgba(151, 67, 159, 0.5);
		box-shadow: 0px 0px 14px 5px rgba(151, 67, 159, 0.5);
	}
}

@-moz-keyframes changed {
	0%, 100%{
		-moz-box-shadow: 0px 0px 14px 5px rgba(151, 67, 159, 0);
		box-shadow: 0px 0px 14px 5px rgba(151, 67, 159, 0);
	}
	50%{
		-moz-box-shadow: 0px 0px 14px 5px rgba(151, 67, 159, 0.5);
		box-shadow: 0px 0px 14px 5px rgba(151, 67, 159, 0.5);
	}
}

@keyframes changed {
	0%, 100%{
		box-shadow:0px 0px 14px 5px rgba(151, 67, 159, 0);
	}
	50% {
		box-shadow:0px 0px 14px 5px rgba(151, 67, 159, 0.5);
	}
}
@-ms-keyframes changed {
	0%, 100%{
		-ms-box-shadow:0px 0px 14px 5px rgba(151, 67, 159, 0);
		box-shadow:0px 0px 14px 5px rgba(151, 67, 159, 0);
	}
	50% {
		-ms-box-shadow: 0px 0px 14px 5px rgba(151, 67, 159, 0);
		box-shadow: 0px 0px 14px 5px rgba(151, 67, 159, 0.5);
	}
}

JavaScript

var $cs = $('.styled').customSelect();