HTML
<!doctype html>
<html>
<body>
<div>
<h1>Pure CSS Select Box Styling</h1>
<p>Originally implemented on <a href="https://internationale-friedenspolitik.org/">internationale-friedenspolitik.org</a></p>
<select class="custom-select">
<option>Choose something...</option>
<option>Lachs-Carpaccio</option>
<option>Pizza</option>
</select>
<p>Feel free to use this code.<br>If you have any suggestions, please leave a comment.</p>
</div>
</body>
</html>
CSS
.custom-select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 57px;
padding: 10px 38px 10px 16px;
background: #fff url("https://anselmurban.de/codepen-img/select-arrows.svg") no-repeat right 16px center;
background-size: 10px;
transition: border-color .1s ease-in-out,box-shadow .1s ease-in-out;
border: 1px solid #ddd;
border-radius: 3px;
}
.custom-select:hover {
border: 1px solid #999;
}
.custom-select:focus {
border: 1px solid #999;
box-shadow: 0 3px 5px 0 rgba(0,0,0,.2);
outline: none;
}
/* remove default arrow in IE */
select::-ms-expand {
display:none;
}
/* DEMO STYLING */
html {
height: 100%;
font-size: 62.5%;
}
body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-family: 'Source Sans Pro', sans-serif;
font-size: 1.8rem;
color: #333;
background: radial-gradient(ellipse at center, #f5f5f5 0%,#ddd 100%);
}
h1 {
font-family: Merriweather, serif;
}
a {
color: #333;
font-weight: 700;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.custom-select {
font-family: 'Source Sans Pro', sans-serif;
font-size: 1.6rem;
}
