'How to hide select options using css in IE?

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

htmlcssinternet-explorer


Solution 1:[1]

use hidden for it:

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

Solution 2:[2]

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/

Solution 3:[3]

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/

Solution 4:[4]

Try this:

#selectid { 
   display: none !important;
}

It works to me on IE 11.

Solution 5:[5]

Below code worked partially for me(in IE):

option#id { visibility: hidden; }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Tonya
Solution 2 Stefan Andre Brannfjell
Solution 3 Community
Solution 4 Celtik
Solution 5 JK7

Related Questions