Hide select options with css

Question

I would like to hide a select form option using CSS but I can't figure out how to do this.

I have a form like this and I need to remove the "before" option.

I expect that option[value=before]{display:none!important} will hide it but it appears it does not work.

option[value=before] {
  display: none!important
}

<select class="_select">
  <option value="">Any</option>
  <option value="1d">Today</option>
  <option value="7d">This Week</option>
  <option value="31d">This month</option>
  <option selected="" value="before">Before date</option>
</select>

Answer 1

Use "" :[value="before"]

If you want to hide it from select remove selected="" from <option selected="" value="before">Before date</option>

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

<select class="_select">
  <option value="">Indifférente</option>
  <option value="1d">Today</option>
  <option value="7d">This Week</option>
  <option value="31d">This month</option>
  <option  value="before">Before date</option>
</select>