<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

        <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

• javascript
• jquery
• html

• 3 First of all, use .prop('disabled', true) instead of setting the attribute to a string. – ThiefMaster Commented Jul 24, 2012 at 18:58
• 1 How about displaying div with similar CSS instead of select list ? – Riz Commented Jul 24, 2012 at 19:01
• stackoverflow.com/questions/5912791/… is related – fardjad Commented Jul 24, 2012 at 19:01
• @ThiefMaster: I'd say it's OK in here, as the attribute will set the default property correctly. – Bergi Commented Jul 24, 2012 at 19:02
• Sure, it's not incorrect. But not the best way. – ThiefMaster Commented Jul 24, 2012 at 19:04

7 Answers 7

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.

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.

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.

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>

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.

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.

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();