Currently, I am trying to customize the select option box using HTML and CSS. My main goal is to incorporate a scroll feature into the option box. However, I have encountered an issue where the image of the checked box remains visible on the screen.
Below is the example code snippet that I am working with:
.selectbox {
width: 30%;
}
.selectWrapper {
width: 100%;
overflow: hidden;
position: relative;
border: 1px solid #bbb;
border-radius: 2px;
background:#FFFFFF url('https://cdn.iconscout.com/icon/free/png-256/down-chevron-1438184-1216147.png') right 13px center no-repeat;
}
.selectWrapper select {
padding: 12px 40px 12px 20px;
font-size: 18px;
line-height: 18px;
width: 100%;
border: none;
box-shadow: none;
background: transparent;
background-image: none;
-webkit-appearance: none;
outline: none;
cursor: pointer;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: scroll;
}<div class="selectbox">
<div class="selectWrapper">
<select id="selectOpt" onfocus='this.size=5;' onblur='this.size=1;' onchange='this.size=1; this.blur();'>
<option>Lorem</option>
<option>Parturient</option>
<option>Euismod</option>
... (remaining options)
</select>
</div>
</div>