html {
font-size: 62.5%;
}
h1 {
font-size: 2rem;
}
label {
display: block;
position: relative;
}
.pointerevents label:before {
background: #5d5d5d;
background: -moz-linear-gradient(top, #868686 4%, #646464 50%, #505050 69%, #404040 97%), -moz-linear-gradient(top, #bdbdbd 6%, #888888 63%, #707070 78%, #5d5d5d 98%);
background: -o-linear-gradient(top, #868686 4%, #646464 50%, #505050 69%, #404040 97%), -o-linear-gradient(top, #bdbdbd 6%, #888888 63%, #707070 78%, #5d5d5d 98%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(4%, #868686), color-stop(50%, #646464), color-stop(69%, #505050), color-stop(97%, #404040)), -webkit-gradient(linear, left top, left bottom, color-stop(6%, #bdbdbd), color-stop(63%, #888888), color-stop(78%, #707070), color-stop(98%, #5d5d5d));
background: -webkit-linear-gradient(top, #868686 4%, #646464 50%, #505050 69%, #404040 97%), -webkit-linear-gradient(top, #bdbdbd 6%, #888888 63%, #707070 78%, #5d5d5d 98%);
background: linear-gradient(top, #868686 4%, #646464 50%, #505050 69%, #404040 97%), linear-gradient(top, #bdbdbd 6%, #888888 63%, #707070 78%, #5d5d5d 98%);
background-position: right 0, 0 0;
background-repeat: repeat-y;
background-size: 45px 100%, auto;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
bottom: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #fff;
content: attr(data-option);
display: block;
font-family: Helvetica, Arial, sans-serif;
font-size: 2.2rem;
line-height: 2.2rem;
padding: .8rem 5rem .8rem 1.6rem;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
}
.pointerevents label:hover:before, .pointerevents label:focus:before {
background: -moz-linear-gradient(top, #868686 4%, #646464 50%, #505050 69%, #404040 97%), -moz-linear-gradient(top, #b4b4b4 6%, #7e7e7e 63%, #666 78%, #535353 98%);
background: -o-linear-gradient(top, #868686 4%, #646464 50%, #505050 69%, #404040 97%), -o-linear-gradient(top, #b4b4b4 6%, #7e7e7e 63%, #666 78%, #535353 98%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(4%, #868686), color-stop(50%, #646464), color-stop(69%, #505050), color-stop(97%, #404040)), -webkit-gradient(linear, left top, left bottom, color-stop(6%, #b4b4b4), color-stop(63%, #b4b4b4), color-stop(78%, #7e7e7e), color-stop(98%, #666));
background: -webkit-linear-gradient(top, #868686 4%, #646464 50%, #505050 69%, #404040 97%), -webkit-linear-gradient(top, #b4b4b4 6%, #7e7e7e 63%, #666 78%, #535353 98%);
background: linear-gradient(top, #868686 4%, #646464 50%, #505050 69%, #404040 97%), linear-gradient(top, #b4b4b4 6%, #7e7e7e 63%, #666 78%, #535353 98%);
}
.pointerevents label:after {
border-style: solid;
border-width: 9px 8.5px 0 8.5px;
border-color: #fff transparent transparent transparent;
content: '';
height: 0;
position: absolute;
right: 14px;
width: 0;
top: 17px;
}
select {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 4.2rem;
width: 100%;
}
.pointerevents select {
cursor: pointer;
opacity: 0;
}
/* Modernizr 2.5.3 (Custom Build) | MIT & BSD
* Build: http://www.modernizr.com/download/#-cssclasses-addtest-css_pointerevents
*/
;window.Modernizr=function(a,b,c){function u(a){j.cssText=a}function v(a,b){return u(prefixes.join(a+";")+(b||""))}function w(a,b){return typeof a===b}function x(a,b){return!!~(""+a).indexOf(b)}function y(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:w(f,"function")?f.bind(d||b):f}return!1}var d="2.5.3",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m={},n={},o={},p=[],q=p.slice,r,s={}.hasOwnProperty,t;!w(s,"undefined")&&!w(s.call,"undefined")?t=function(a,b){return s.call(a,b)}:t=function(a,b){return b in a&&w(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=q.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(q.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(q.call(arguments)))};return e});for(var z in m)t(m,z)&&(r=z.toLowerCase(),e[r]=m[z](),p.push((e[r]?"":"no-")+r));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)t(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,g.className+=" "+(b?"":"no-")+a,e[a]=b}return e},u(""),i=k=null,e._version=d,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+p.join(" "):""),e}(this,this.document),Modernizr.addTest("pointerevents",function(){var a=document.createElement("x"),b=document.documentElement,c=window.getComputedStyle,d;return"pointerEvents"in a.style?(a.style.pointerEvents="auto",a.style.pointerEvents="x",b.appendChild(a),d=c&&c(a,"").pointerEvents==="auto",b.removeChild(a),!!d):!1});
(function() {
var $select = $('select'), $label = $('label');
$label.attr('data-option', $select.find('option:selected').text());
$select.on('change', function(e) {
var $option = $(this).find('option:selected');
$label.attr('data-option', $option.text());
});
})();
<h1>Custom select dropdowns with CSS3 and Modernizr</h1>
<label>
<select>
<option>Select your country</option>
<option>Australia</option>
<option>England</option>
<option>United States</option>
</select>
</label>