How to hide select options using css in IE?

Question

I want to hide the options for a select tag and below is the code I have written. This works well with Chrome and Firefox but not with IE.

<style>
            option{
                display:none !important;
            }
</style>

<select style="width:400px" id="selectid" >
            <option id="result1" value="Select" >Select</option>
            <option disabled value="abcd" >abcd</option>
            <option disabled value="abcd" >abcd</option>
            <option disabled value="abcd" >abcd</option>
            <option disabled value="abcd" >abcd</option>
</select>

Is there any simple CSS style that will hide it? I have tried many answers in stackoverflow but no luck. I don't want to unnecessarily go to jquery for a simplle css stuff.

Edit: I dont want the dropdown to appear

You don't want the dropdown to appear is ambiguous, are you referring to the options or the select element itself? — Professor of programming, May 15 '17 at 20:48

score 0 · Answer 1 · answered Feb 02 '16 at 11:43

0

use hidden for it:

<option value="" hidden></option>

answered Feb 02 '16 at 11:43

Tonya

25
1

1

Before anyone chooses to [recommend deletion](http://stackoverflow.com/review/low-quality-posts/11115630) of this post, this is a valid attempted answer. This post should not have been flagged and should not be recommended for deletion in the LQPRQ. See: [You're doing it wrong: A plea for sanity in the Low Quality Posts queue](http://meta.stackoverflow.com/q/287563) and [Your answer is in another castle: when is an answer not an answer?](http://meta.stackexchange.com/q/225370) – Feb 03 '16 at 00:47
2 months ago I got suspended from reviewing just for marking a similar answer as a "looks ok" and it was an attempted answer too – Mi-Creativity Feb 03 '16 at 02:24
@bonner it doesnt have to work to be an attempted answer. it suggests a solution, however wrong it may be. feel free to downvote – May 03 '17 at 14:53

score 0 · Answer 2 · answered Jan 18 '19 at 14:48

I hide the original select table in CSS, and add a supplementary select table for "filtered results". And I just use javascript/jQuery to move the relevant options to the filtered results element.

Works in every browser. HTML:

<div id="banner-message">
    <h4>Filter available color variants based on selected color category.</h4>
    <p>Select color category:</p>
    <select id="category">
        <option value="red">red</option>
        <option value="green">green</option>
        <option value="blue">blue</option>
    </select>

    <p>Select color variant</p>
    <select id="varint_full" style="display: none;">
        <option class="red green blue" value="none">No variant</option>
        <option class="red" value="indianred">Indian red</option>
        <option class="red" value="orangered">Orange red</option>
        <option class="red" value="darkred">Dark red</option>
        <option class="green" value="forestgreen">Forest green</option>
        <option class="green" value="lime">Lime</option>
        <option class="green" value="lightseagreen">Light sea green</option>
        <option class="blue" value="blueviolet">Blue violet</option>
        <option class="blue" value="cornflowerblue">Corn flower blue</option>
        <option class="blue" value="lightskyblue">Light sky blue</option>
    </select>
    <select id="variant_filtered">

    </select>

</div>

JavaScript:

function filterVariant() {
    // Reset filters
    $('select#variant_filtered option').appendTo('select#varint_full')

    // Apply new filters
    var category = $('select#category').val()
    $('select#varint_full option.' + category).appendTo('select#variant_filtered')
    $('select#variant_filtered').val('none')

    changeColor()
}

function changeColor() {
    // Apply style change
    var filtered_color = $('select#variant_filtered').val()
    var category = $('select#category').val()

    $('select').css({
        'background-color': (filtered_color == 'none') ? category : filtered_color
    })
}

filterVariant()
$('#category').change(function() {
    filterVariant()
})
$('#variant_filtered').change(function() {
    changeColor()
})

JSFIDDLE: Filter available color variants based on selected color category. https://jsfiddle.net/Znote/exdcaqtv/2/

score -1 · Answer 3 · edited May 23 '17 at 11:47

This is what you are looking for. Options cannot be hidden in IE browsers, you can only disable it. Another option is to replace html of select element with empty html. As you can see in the jsfiddle below. Hide options in select element, not working in IE?

$("#selectid:not(#selectid:first-child)").html("");

            option{
                display:none !important;
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select style="width:400px" id="selectid" >
            <option id="result1" value="Select" >Select</option>
            <option disabled value="abcd" >abcd</option>
            <option disabled value="abcd" >abcd</option>
            <option disabled value="abcd" >abcd</option>
            <option disabled value="abcd" >abcd</option>
</select>

Here is the js fiddle:- http://jsfiddle.net/bj5fqj11/3/

You can open the link that you have commented in IE. It is not hiding the options. — Sachin B. R., Apr 17 '15 at 05:21

score -1 · Answer 4 · answered Jan 19 '16 at 12:47

-1

Try this:

#selectid { 
   display: none !important;
}

It works to me on IE 11.

answered Jan 19 '16 at 12:47

Celtik

327
4
14

score -2 · Answer 5 · answered Apr 12 '17 at 14:07

-2

Below code worked partially for me(in IE):

option#id { visibility: hidden; }

answered Apr 12 '17 at 14:07

JK7

1
1

score -3 · Answer 6 · answered Apr 17 '15 at 04:24

-3

You’re not closing the style values in quotations. Look:

style=“display:none;>

So if you add the double quote after: display:none; it should work.

answered Apr 17 '15 at 04:24

Pavel Bogr.

3
6

I have not used inline style – Sachin B. R. Apr 17 '15 at 04:49

How to hide select options using css in IE?

6 Answers6

Linked