hide select options using only css

Viewed 65

I have a select and I need to hide some options using css, so I did :

<select name="time-2-hours" id="forminator-field-time-2-hours" class="forminator-select2 select2-hidden-accessible" data-field="hours" data-default-value="" tabindex="-1" aria-hidden="true">
<option value="0" selected="selected">00</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>

css:

 option[value="2"] {
    display: none;
}

but its not working is there some thing wrong in my code ? I also try :

select#forminator-field-time-2-hours option[value="2"] {
    display: none;
}
1 Answers

you can do this by adding style="display:none" to the option you want to hide using nth-child, for example i did it to option 05 from your code by adding select option:nth-child(6){ display:none; } :

select option:nth-child(6){ 
  display:none;
}
<select name="time-2-hours" id="forminator-field-time-2-hours" class="forminator-select2 select2-hidden-accessible" data-field="hours" data-default-value="" tabindex="-1" aria-hidden="true">
<option value="0" selected="selected">00</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>

Related