How to hide only one option element using css only

Question

 <select class="Select-input">
   <option value="one">One</option>
   <option value="two">Two</option>
   <option value="three">Three</option>
   <option value="four">Four</option>
 </select>

I want to hide only value four from the above code.

I tried using {display:none} for value-four but it didn't work.

Also want to add padding between this elements one, two, three and four.

P.S. I want to remove it using CSS only.

Unfortunately it seems that all of our biggest browsers will disagree on how this should be handled. FF and Chrome will accept display:none and deal with it properly, while IE, Edge and Safari will ignore it. After my own search this is what I've found: https://stackoverflow.com/questions/9234830/how-to-hide-a-option-in-a-select-menu-with-css — Kyle Wilson, Sep 22 '17 at 21:26

score 11 · Answer 1 · edited May 23 '17 at 12:17

11

Attribute selector is the key, although as Musa points out, you can't hide a option in internet explorer.

Article here on hiding option in IE Options with display:none not hidden in IE

   .Select-input option[value=four] {display: none;}

 <select class="Select-input">
   <option value="one">One</option>
   <option value="two">Two</option>
   <option value="three">Three</option>
   <option value="four">Four</option>
 </select>

edited May 23 '17 at 12:17

Community

1
1

answered Dec 16 '15 at 16:23

Aaron

10,187
3
23
39

4

That's not what I meant, you **can't** hide options in IE – Musa Dec 16 '15 at 16:33

score 4 · Answer 2 · answered Dec 16 '15 at 16:33

I took the part Aaron already answered and added the requested padding:

option {padding: 7px 0px 7px 5px;}

option[value=four] {display: none;}

<select class="Select-input">
   <option value="one">One</option>
   <option value="two">Two</option>
   <option value="three">Three</option>
   <option value="four">Four</option>
 </select>

score 2 · Answer 3 · answered Dec 16 '15 at 16:26

2

You can do this:

CSS

.Select-input option:nth-child(4){
  display: none;
}

DEMO HERE

answered Dec 16 '15 at 16:26

Luís P. A.

9,524
2
23
36

Its working here in DEMO but not in actual site. I think Chrome is not allowing this. – Siren Brown Dec 16 '15 at 17:04
Chrome cache is stiff and hard to let go! Clear cache completely and it should work! – Ojchris Jun 11 '20 at 14:12

score 1 · Answer 4 · answered Dec 16 '15 at 16:24

1

Try this one, may help

select option:last-child {display:none;}

answered Dec 16 '15 at 16:24

Prajwal Shrestha

524
3
12

The Beast · Answer 5 · 2015-12-16T16:37:50.690

0

Try this:

.Select-input option:nth-of-type(2) {
    display:none;
}

Or you can do this to:

.Select-input option:nth-child(1){
   display: none;
 }

edited Dec 16 '15 at 16:37

answered Dec 16 '15 at 16:25

The Beast

1
1
2
24

score 0 · Answer 6 · answered Jun 30 '20 at 16:56

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Demo</title>
</head>
<body>

    <select class="Select-input">
      <option value="one">One</option>
      <option value="two">Two</option>
      <option value="three">Three</option>
      <option value="four" style="display:none;">Four</option>
    </select>
  </body>
 </html>

Use inline CSS if you just want to hide just one option using CSS.

If you want to display:block; or display:none; dynamically than use javascript.

Hopefully my contribution will help you.

How to hide only one option element using css only

6 Answers6

Linked

Related