0

HTML:

    <select id="resource-list" onchange="js_resource_filter_changed()" name="resource-list">
    <option value="site">This is option 1</option>
    <option value="154" selected="selected">This is option 2</option>
    </select>

CSS:

    #resource-list option[value="site"] {display: none !important;}

My goal is to hide option 1 using only CSS. This work well with IE9 and above + Chrome and FF but not for IE8 and Safari. I wondering if the code could be adapted or if is impossible to hide in all browser a specific select option.

You can test here: http://jsfiddle.net/cX9gC/

dotcom27
  • 1
  • 1
  • 2
  • 5
  • In the demo provided, option 1 isn't hidden in Chrome 31 on Mac OS X. – shshaw Nov 19 '13 at 22:54
  • Is Javascript completely out of the question? I'm assuming it is, but wanted to confirm. – Dryden Long Nov 19 '13 at 22:56
  • @shshaw Really ? Damn... Under Window7 + Chrome 29 AND under Ubuntu + Chromium otpion is well hidden. – dotcom27 Nov 19 '13 at 23:02
  • @Dryden Long If in CSS is not possible maybe JS could be used. Have you a suggestion ? – dotcom27 Nov 19 '13 at 23:05
  • @dotcom27 Here's a screenshot: http://cl.ly/image/2M3p261j3N0a I'm pretty sure the only way to reliable remove/hide it cross browser will be with Javascript. – shshaw Nov 19 '13 at 23:05
  • @dotcom27 CSS is possible, just not preferred in my opinion. I've made an answer below using CSS. A javascript solution should be easy to find by searching for "hide select option with Javascript" – Dryden Long Nov 19 '13 at 23:06
  • @Dryden Long I tested but this don't work. Now I admit I do my test using Browserstack so I don't know if this service is reliable or not. Is just my only way right now for test different browser. Well I will try using JS.. Thanks – dotcom27 Nov 19 '13 at 23:22
  • @dotcom27 My bad, I just remembered that IE8 doesn't support the manipulation of ` – Dryden Long Nov 19 '13 at 23:23
  • Yeah, from a little research it looks like some browsers don't allow any styles whatsoever to be applied to option selects, so I agree that javascript is the only reliable way to accomplish this. – eshellborn Nov 19 '13 at 23:31

3 Answers3

0

The answer to this is, since IE doesn't support hiding option tags within a select (combo box, dropdown control) is to wrap each option in a span tag, and kind of like apply a class to this span tag to hide it or something. I did it and it works for me; here's the thread from which i took it Hide options in a select list using jQuery

Community
  • 1
  • 1
Roman Jaquez
  • 2,499
  • 1
  • 14
  • 7
-1

You could use first-child to hide the very first <option> tag. Something like this should work:

#resource-list option:first-child {
  display: none;
}

Here it is in action: http://jsfiddle.net/7Vs9Y/

Since first-child is a part of CSS 2.1, IE8 does support it.

UPDATE

Since I forgot that IE8 doesn't allow display:none; to work on <option> tags, I'll provide a JQuery solution here. I'm going to leave my original answer up, in the off chance that someone else may find it useful to their situation.

Using JQuery we can do something like .remove() to completely remove the first <option> tag. This is actually preferable to the first-child technique as it removes the tag from the DOM completely rather than only hiding it and allowing a person using developer tools to modify the applied CSS. Checkout http://api.jquery.com/remove/ for more info on how to use it.

Dryden Long
  • 10,072
  • 2
  • 35
  • 47
  • This makes no difference. You're just using a different (and arguably less supported) selector to access the same element. – eshellborn Nov 19 '13 at 23:34
-1

Try these for the firdt child 

width: 0; height: 0;

or

visibility: hidden;

or

opacity: 0;

or

position: absolute; top: -9999px; left: -9999px;
Yagiz Ozturk
  • 5,408
  • 7
  • 29
  • 44