I tried to make HTML select dropdown option to button style. it is working perfectly in desktop browsers but it is not working in the mobile browsers. here the computer view enter image description here
but in mobile view it is showing as a normal select dropdown. the custom CSS not working here the mobile view enter image description here
#id_work_days{
height: 44px;
border: none;
overflow: hidden;
}
#id_work_days::-moz-focus-inner {
border: 0;
}
#id_work_days:focus {
outline: none;
}
#id_work_days option{
width: 60px;
font-size: 1.2em;
padding: 10px 0;
text-align: center;
margin-right: 20px;
display: inline-block;
cursor: pointer;
border:rgb(204, 204, 0) solid 1px;
border-radius: 5px;
color: rgb(204, 204, 0);
}<select name="work_days" id="id_work_days" multiple>
<option value="1">sun</option>
<option value="2">mon</option>
<option value="3">tue</option>
<option value="4">wed</option>
<option value="5">thu</option>
<option value="6">fri</option>
<option value="7">sat</option>
</select>