Custom Arrows on Select / Custom Dropdown Arrows
div class="cust-sel cust-sel-1">
<select>
<option value="1">Lorem ipsum.</option>
<option value="2">Sunt, nesciunt.</option>
<option value="3">Repellendus, nostrum.</option>
</select>
</div>
<br>
<div class="cust-sel cust-sel-2">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.cust-sel{
position: relative;
display:block;
}
.cust-sel::after{
content: '';
position: absolute;
top:0;
bottom:0;
margin:auto 0;
}
.cust-sel select{
padding: 5px 20px 5px 5px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display:block;
width:100%;
}
.cust-sel select::-ms-expand {
display: none;
}
/* Types of Arrows */
.cust-sel-1::after{
right: 8px;
width: 0;
height:0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #5591dc;
pointer-events: none;
}
.cust-sel-2::after{
right: 8px;
height:7px;
width:7px;
border:2px solid #5591dc;
border-left: none;
border-top: none;
background-color:transparent;
transform-origin: 50% 50%;
transform: rotate(45deg);
transition: all 0.15s ease-in-out;
border-radius:0 0 1px 0;
pointer-events: none;
}
</style>
</head>
<body>
<div class="cust-sel cust-sel-1">
<select>
<option value="1">Lorem ipsum.</option>
<option value="2">Sunt, nesciunt.</option>
<option value="3">Repellendus, nostrum.</option>
</select>
</div>
<br>
<div class="cust-sel cust-sel-2">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
</body>
</html>
.cust-sel{
position: relative;
display:block;
}
.cust-sel::after{
content: '';
position: absolute;
top:0;
bottom:0;
margin:auto 0;
}
.cust-sel select{
padding: 5px 20px 5px 5px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display:block;
width:100%;
}
.cust-sel select::-ms-expand {
display: none;
}
/* Types of Arrows */
.cust-sel-1::after{
right: 8px;
width: 0;
height:0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #5591dc;
pointer-events: none;
}
.cust-sel-2::after{
right: 8px;
height:7px;
width:7px;
border:2px solid #5591dc;
border-left: none;
border-top: none;
background-color:transparent;
transform-origin: 50% 50%;
transform: rotate(45deg);
transition: all 0.15s ease-in-out;
border-radius:0 0 1px 0;
pointer-events: none;
}