Last Updated: May 31, 2021
·
1.084K
· climboid

Styling a select box

This will only work for webkit browsers and the main trick is to set the style to none

select{
-webkit-appearance: none;
/* from here do what you want */
padding: 4px 33px 4px 10px;
font-size: 24px;
line-height: 29px;
text-align: left;
background-image: url("../img/arrowSelect.png");
background-size: 21px 18px;
background-repeat: no-repeat;
background-position: 90px 11px;
background-color: #D4D4D4;
}

Picture

1 Response
Add your response

@dlion right so -webkit-appearance: none; is only for webkit browsers, not sure if there is something similar for firefox? the fix was intended only for webkit

over 1 year ago ·