stylish select box

/* The CSS */
select {

outline:none;
display: inline-block;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
cursor:pointer;
}

/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
select {padding-right:18px}
}

#sidebar .section-select{position:relative}
#sidebar .section-select:after {
content:’>’;
font:25px “Consolas”, monospace;
color:#fff; font-weight:bold;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
right:8px; top:5px;
padding:0 0 2px;

position:absolute;
pointer-events:none;
}
#sidebar .section-select:before {
content:”;
right:1px; top:0px;
width:34px; height:39px;
background:#F0A923;
position:absolute;
pointer-events:none;
display:block;
}

Advertisements

Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

WordPress.com.

Up ↑