CODEWITHSUNDEEP
htmlcss
Vipertecpro
Vipertecpro

Reputation: 3284

:read-only selector not working on select tag?

I've been trying to make select tag read only means it should not be selectable, when i try to add attribute readonly it works fine but it is also applying on select tag which do not have readonly attribute, i think i'm not applying selector properly,

I cannot set it disabled because it won't submit along with form details, this is what i've tried in w3school editor :- 

select:-moz-read-only {
  /* For Firefox */
  pointer-events: none;
}

select:read-only {
  pointer-events: none;
}
<p> ACCEPTED </p>
<select readonly>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
<br>
<p> UNACCEPTED : selector also applying here </p>
<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

Upvotes: 3

Views: 5198

Answers (2)

Mr. Alien
Mr. Alien

Reputation: 157374

You need to assign a unique identifier such as a class or an id to specifically make the first select tag readonly and not both.. for example, here, am using tag and an attribute selector to select the tags which have readonly attribute

select[readonly]:-moz-read-only {
  /* For Firefox */
  pointer-events: none;
}

select[readonly]:read-only {
  pointer-events: none;
}
<p> ACCEPTED </p>
<select readonly>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
<br>
<p> UNACCEPTED : selector also applying here </p>
<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

The selector you are using is a tag selector and will select any select tag and turn it into readonly.

Adding some details based on the comments,

You can disable the tab focus by using tabindex attribute with a value set to false on the select tag

Also, you should not rely on the data passed from the client side if it's meant to be readonly. You need to have a proper validation in place in the backend which will prevent a user from passing any false or malicious data. No matter what you use, simple HTML CSS solution like above or disabling keys using JavaScript, you cannot prevent the user to not to alter the value of the tag.

Upvotes: 4

Nisarg Shah
Nisarg Shah

Reputation: 14551

According to the spec, <select> element is considered read-only as it is not explicitly editable by the user.

The :read-write pseudo-class must match any element falling into one of the following categories, which for the purposes of Selectors are thus considered user-alterable: [SELECTORS]

  • input elements to which the readonly attribute applies, and that are mutable (i.e. that do not have the readonly attribute specified and that are not disabled)
  • textarea elements that do not have a readonly attribute, and that are not disabled
  • elements that are editing hosts or editable and are neither input elements nor textarea elements

The :read-only pseudo-class must match all other HTML elements.

You should instead use disabled attribute to indicate that the user cannot interact with the <select> element. With disabled attribute, you don't have to specify extra CSS to disable mouse interaction with the element.

Here's how it would work:

<p> ACCEPTED </p>
<select disabled>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
<br>
<p> UNACCEPTED : selector also applying here </p>
<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

Upvotes: 2

Related Questions