: селектор только для чтения не работает на теге select?

Question

Я пытался сделать тег выбора доступным только для чтения, это означает, что он не должен быть доступен для выбора, когда я пытаюсь добавить атрибут только для чтения, он работает нормально, но он также применяется к тегу выбора, который не имеет атрибута только для чтения, я думаю, что 'я неправильно применяю селектор,

Я не могу установить его отключенным, потому что он не будет отправляться вместе с деталями формы, это то, что я пробовал в редакторе w3school: -

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>

Answer 1

В соответствии с spec , элемент <select> считается read-only, так как он явно не редактируется пользователем.

: чтение-запись псевдокласс должен соответствовать любому элементу, попадающему в одну из следующих категорий, которые, таким образом, для целей селекторов считаются изменяемыми пользователем: [SELECTORS]

• input элементы, к которым применяется атрибут readonly, и которые являются изменяемыми (то есть не имеют указанного атрибута readonly и не отключены)
• textarea элементы, которые не имеют атрибут readonly,и которые не отключены
• элементы , которые редактируют узлы или являются редактируемыми и не являются ни элементами ввода, ни элементами textarea

: только для чтения псевдокласс должен соответствовать всем другим элементам HTML.

Вместо этого следует использовать атрибут disabled, чтобы указать, что пользователь не может взаимодействовать с элементом <select>.С атрибутом disabled вам не нужно указывать дополнительный CSS, чтобы отключить взаимодействие мыши с элементом.

Вот как это будет работать:

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

Answer 2

Вам необходимо назначить уникальный идентификатор, такой как class или id, чтобы специально сделать первый тег выбора readonly, а не оба ... например, здесь я использую тег и селектор атрибута для выборатеги, которые имеют readonly атрибут

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>

Используемый вами селектор является селектором тегов и выберет любой тег select и превратит его в режим только для чтения.

---

Добавляя некоторые подробности на основе комментариев,

Вы можете отключить фокус вкладки, используя атрибут tabindex со значением, установленным в false для тега select

Также вам следуетне полагаться на данные, передаваемые со стороны клиента, если они предназначены только для чтения.В бэкэнде должна быть соответствующая проверка, которая не позволит пользователю передавать ложные или вредоносные данные.Независимо от того, что вы используете, простое решение HTML CSS, как описано выше, или отключение ключей с помощью JavaScript, вы не можете запретить пользователю изменять значение тега.