发表新帖
发表新帖

How to hide only one option element using css only

前端 未结
关注
6 1976
孤城傲影
孤城傲影 2020-12-20 18:20
提交评论
  •  加载中...
  • 情深已故
    2020-12-20 18:47

    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>

    0 讨论(0)
  • 囚心锁ツ
    2020-12-20 18:49

    You can do this:

    CSS

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

    DEMO HERE

    0 讨论(0)
  • 迷失自我
    2020-12-20 18:53

    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>

    0 讨论(0)
  • 说谎
    2020-12-20 18:56

    Try this one, may help

    select option:last-child {display:none;}
    0 讨论(0)
  • 误落风尘
    2020-12-20 18:59

    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;
 }
    0 讨论(0)
    •  看不清?
    提交回复
    热议问题