0

How can I use the CSS atribute selector to select multiple items? I need to hide some options written out by 3rd-party code on my site. In the example code below, I need to hide option 3, 4 and 6:

<select id="requestTypeSelect" name="requestType" required="required">
  <option value="" selected="selected" disabled="disabled">Type of Request *</option>
  <option value="1">Right to erasure</option>
  <option value="2">Right to access</option>
  <option value="3">Right to correct data</option>
  <option value="4">Right to data portability</option>
  <option value="5">Right to restrict use of personal data</option>
  <option value="6">Right to object to the use of personal data</option>
</select>

I can use the CSS below:

<style>
  /* hide options 3 5 and 6 */
  [value="3"] {
    display: none;
  }  
</style>

which works when I target just 1 option, but when I try to hide others, no luck. I tried [value~="3 5 6"]based on what I'm reading from https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors but that doesn't work. I'm only able to hide a single item this way.

Any help would be greatly appreciated. thanks!

user45220
  • 41
  • 1
  • 4

0 Answers0