<div class="container">
<div class="cus-select-group">
<select name="" id="select-item">
<option value="">Please select</option>
<option value="">option 1</option>
<option value="">option 2</option>
<option value="">option 3</option>
</select>
</div>
</div>
#select-item{
padding: 6px 0 6px 40px;
-webkit-appearance:none;
width:100%;
border: 1px solid #c4c4c4;
background-color: #f7f7f5;
}
.container{
width:150px;
}
.cus-select-group{
width:100%;
position:relative;
}
.cus-select-group:not(*:root):after{
content:"";
display:block;
width:0;
height:0;
border-color:#000 transparent transparent transparent;
border-width:6px 3px 6px 3px;
border-style:solid;
position:absolute;
right:6px;
top:50%;
margin-top:-2.5px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.