1

Quick question. I've tried to search, but could not find anything. Could also be because I use the wrong keywords for search.

Anyways, this is my problem:

I'm hiding certain elements on my webpage using css like this:

.selectBox option[value='6']{
    display:none;
}

Works fine on my windows pc, but Safari v8.0.6 on mac will not use the css. Are there any workarounds? I could add a new class and hide based on class, but I would like to do this using either 'value' or 'label' attribute

Fiddle: https://jsfiddle.net/qdsq5v70/

Stian Berg Larsen
  • 543
  • 2
  • 10
  • 29
  • Do you have some JSFiddle for testing? – areim Jul 07 '15 at 12:42
  • Are you sure it's the selector failing? Some browsers, from memory, don't - for whatever reason - allow ` – David Thomas Jul 07 '15 at 12:49
  • Here is fiddle. Does not hide option 2 on Safari, but works for me on windows in firefox: https://jsfiddle.net/qdsq5v70/ – Stian Berg Larsen Jul 07 '15 at 12:50
  • I agree with David Toams, it looks like the problem is with styling "option" not in selctor. See e.g: http://stackoverflow.com/questions/12301729/styling-option-value-in-select-drop-down-html-not-work-on-chrome-safari – areim Jul 07 '15 at 12:52
  • @DavidThomas: You might be right. But how would I hide these using css then? Do I have to use javascript to hide them? – Stian Berg Larsen Jul 07 '15 at 12:52
  • You have now one hint, what to search - we identify you problem. Styling select is always a big pain :) You can e.g. change – areim Jul 07 '15 at 13:01

1 Answers1

1

As far as I know the short answer is No, it's not possible using CSS, safari doesn't allow styling the options, only the select container (Styling option value in select drop down html not work on Chrome & Safari)

but you can remove and add options using javascript (of course you probably know that already)

Community
  • 1
  • 1
OfirYaron
  • 157
  • 1
  • 9