Создаем обертку select
для <select>
и далее накидываем стили.
<div class="select">
<select>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
<option value="Pixso">Pixso</option>
</select>
</div>
$gray: #ccc;
html, body {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.select {
position: relative;
select{
width: 100%;
border: 1px solid $gray;
border-radius: 2px;
position: relative;
outline: none;
padding: 10px 12px 12px;
padding-right: 40px;
background: #fff;
-moz-appearance: none;
-webkit-appearance: none;
}
&:after {
content: '‹';
color: $gray;
font-size: 26px;
line-height: 0;
display: block;
position: absolute;
top: 20px;
right: 19px;
transform: rotate(-90deg);
}
}