Remove the down arrow from disable select

Question

        <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

Answer 1

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.