Remove the down arrow from disable select

html, javascript, jquery

Solution

This is doable, yes:

select[disabled] {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}

Live example: http://jsfiddle.net/joaocunha/UhfcA/1/ (make sure to check the gist inside to understand how it works).

BTW, I'm with @ThiefMaster: doable doesn't mean it should be done. Removing the select arrow without providing a custom one is plain bad user experience.

Problem

``` <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes" selected>Mercedes</option> <option value="audi">Audi</option> </select> $('select').attr('disabled', 'disabled'); ``` is possible to remove the down arrow in disabled select with jQuery or simply Javascript or HTML? jsfiddle

Original source

Related problems