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

First of all, use `.prop('disabled', true)` instead of setting the attribute to a string. — ThiefMaster, Jul 24 '12 at 18:58
How about displaying div with similar CSS instead of select list ? — Riz, Jul 24 '12 at 19:01
http://stackoverflow.com/questions/5912791/how-to-remove-the-arrow-from-a-select-tag-in-firefox is related — fardjad, Jul 24 '12 at 19:01
@ThiefMaster: I'd say it's OK in here, as the attribute will set the default property correctly. — Bergi, Jul 24 '12 at 19:02

score 13 · Answer 1 · answered Aug 24 '13 at 12:34

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.

score 4 · Answer 2 · answered Jul 24 '12 at 19:00

4

That's not possible (especially not in a way that works in all browsers).

You shouldn't do this anyway since a disabled select box still has the arrows - and it's usually bad to do things like that different from how the user's OS usually does it.

answered Jul 24 '12 at 19:00

ThiefMaster

310,957
84
592
636

score 2 · Answer 3 · answered Jul 24 '12 at 19:06

No, this is not possible (at least cross-browser), and as @ThiefMaster says (+1), is not a great idea in any case as you are disturbing the expected norms of the user's UI.

Nonetheless, if you insist, you will need to use a HTML simulation of a drop-down rather than a select tag, like this one, which I made about 100 years ago. There's probably better ones around these days.

score 2 · Answer 4 · edited Jul 21 '17 at 11:01

You can also use css overflow:hidden in the parent. That way, you can crop the select box right, removing the arrow.

CSS:

<style>
    .selectParent{width:80px;overflow:hidden;}
    .selectParent>select{width:100px;}
</style>

Markup :

 <div class="selectParent">
     <select>
           <option value="volvo">Volvo</option>
           <option value="saab">Saab</option>
           <option value="mercedes" selected>Mercedes</option>
           <option value="audi">Audi</option>
     </select>  
 </div>

João Mosmann · Answer 5 · 2012-07-24T19:20:09.633

1

It's not possible.

Try something like this. ( customize with CSS )

$('select').change(function(){
    $('<input />').val($(this).val()).appendTo($(this).parent()).attr('readonly','readonly').attr('disabled','disabled');
    $(this).remove();
});

If the select is already with a value when page loads.

var mySelectBox = $('select');
$('<input />').val($(mySelectBox).val()).appendTo($(mySelectBox).parent()).attr('readonly'‌,'readonly').attr('disabled','disabled');
$(mySelectBox).remove();

edited Jul 24 '12 at 19:20

answered Jul 24 '12 at 19:04

João Mosmann

2,884
19
25

thanks but how can i make it without change? I have this if document is ready. – Paul Jeggor Jul 24 '12 at 19:08
So... var mySelectBox = $('select'); $('').val($(mySelectBox).val()).appendTo($(mySelectBox).parent()).attr('readonly','readonly').attr('disabled','disabled'); $(mySelectBox).remove(); – João Mosmann Jul 24 '12 at 19:19

score 1 · Answer 6 · answered Jul 24 '12 at 19:05

In Webkit (Chrome, Safari), you can specify in Css:

-webkit-appearance: none;
instead of
-webkit-appearance: menulist;

This way you won't have any Select preformatted Css, meaning, no arrow.
But as said ThiefMaster, the best is to keep it like the os usually does it.

score 1 · Answer 7 · answered Jul 24 '12 at 19:06

Its not done that way.

Typically a "styled" select is merely an element of another type with css colors, gradients, images, etc applied to it to give it the dropdown feel.

for example, you could place an input down in place of it, with a dropdown of your choices.

css

.input.select { background: url('downarrow.jpg') no-repeat right top; }
.selectOptions { display: block; width: 100px; height: 200px; background: white; }

markup

<div>
    <input type="text" class="select" value="click me" />
    <div class="selectOptions">
        <ul>
            <li val="some custom value">option</li>
        </ul>
    </div>
</div>

and in jquery you'd do something like this:

$('input.select').bind('click', function() {
    $(this).find('div.selectOptions').toggle();
});

$('div.selectOptions ul li').bind('click', function() {
    var val = $(this).attr('val');
    // update the input upon click.
    var input = $(this).parent().parent().parent().find('input.select');
    input.val( val );
});

Of course you could just use someone else's cross browser library that does that kind of stuff already... like jQuery UI.

Remove the down arrow from disable select

7 Answers7