hide entire blue/black dropdown (options) of empty select

Question

I have an empty select list on which i have binded custom drop down. On clicking on empty select, it comes into focus and shows the empty option list(which is blue in color with black border) Is there a way in css so that we can hide that entire empty option section.

<select id="displaydropdown"></select> <!--empty select list-->
<script>
   //on displaydropdown click show/hide custom dropdown
</script>

In this case custom drop down is visible, along with that empty select list is also visible. i want to hide that internal list box of select list. Currently i am looking into user agent stylesheets to see whether we can override its default functionality.

Please let me know if anymore details.

Since its hard to manage styling select options with crossbrowser compatibility i think there's no css-only solution.check this post http://stackoverflow.com/questions/21831580/css-targeting-select-option-with-displaynone-not-working-in-safari-and-ie — Vivekraj K R, Feb 23 '16 at 04:49
I tried to add outline:none property on select:focus event, some how i want to hide that internal list box — user2406618, Feb 23 '16 at 04:59
Better you Go through This Stackoveflow link > http://stackoverflow.com/questions/9234830/how-to-hide-a-option-in-a-select-menu-with-css — Upendrasinh Jadeja, Feb 23 '16 at 05:17

Shashank · Answer 1 · 2016-02-23T05:11:11.420

0

Try this described in this demo:

HTML:

<select id="displaydropdown"></select>

CSS:

#displaydropdown:empty {
   display: none;
}

edited Feb 23 '16 at 05:11

answered Feb 23 '16 at 05:05

Shashank

2,010
2
18
38

i want to hide the default internal list box/ menulist of select tag and not the select tag itself. If you try clicking on empty select you can see blue/black dropdown. i want to hide that. its default browser functionality. – user2406618 Feb 23 '16 at 05:07

hide entire blue/black dropdown (options) of empty select

1 Answers1