Skip to content

Instantly share code, notes, and snippets.

@MarkoZabcic

MarkoZabcic/index.html

Last active September 2, 2015 14:53
Show Gist options
  • Save MarkoZabcic/ce752bd2a9fa8d75560e to your computer and use it in GitHub Desktop.
Save MarkoZabcic/ce752bd2a9fa8d75560e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Custom select</title>
<style type="text/css">
.cs {
height: 28px;
background: #fff;
border: 2px solid #ccc;
overflow: hidden;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4IiB3aWR0aD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE0IDIwbDEwIDEwIDEwLTEweiIvPjxwYXRoIGQ9Ik0wIDBoNDh2NDhoLTQ4eiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==) no-repeat 100% 50% #fff;
margin-bottom: 15px;
}
.cs select {
width: 100%;
height: 28px;
background: transparent;
border: none;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-indent: 1px;
text-overflow: '';
}
.ie9 .cs select {
width: calc(100% + 1.25em);
}
/* IE9 expand widith so arrow goes out of view */
.cs select::-ms-expand {
display: none;
}
/* IE10+ */
.cs select:focus {
outline: none;
}
/*Only for demo*/
.wrapper{width:200px;}
</style>
</head>
<body>
<div class="wrapper">
<div class="cs">
<select>
<option>Firefox</option>
<option>Chrome</option>
<option>Internet Explorer</option>
<option>Safari</option>
</select>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment