css - 仅使用 css 隐藏选择选项

Question

我有一个选择，我需要使用隐藏一些选项css，所以我做了：

<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;
}

但它不起作用我的代码有什么问题吗？我也尝试：

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

标签： csscss-selectors

Answer 1

您可以通过添加style="display:none"到您想要隐藏的选项来做到这一点nth-child，例如，我通过添加从您的代码中对选项 05 进行了操作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>