：只读选择器不在select标签上工作？

Question

我一直试图使select标签只读它意味着它不应该是可选择的，当我尝试添加属性readonly它工作正常但它也适用于没有readonly属性的select标签，我想我不是应用选择器正确，

我无法将其设置为禁用，因为它不会随表单详细信息一起提交，这是我在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

你需要分配一个唯一的标识符，如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禁用密钥，您都无​​法阻止用户不要更改标记的值。

Answer 2

根据spec，<select>元素被认为是read-only，因为用户无法明确编辑。

：read-write伪类必须匹配属于以下类别之一的任何元素，因此出于选择器的目的，这些元素被认为是用户可更改的：[SELECTORS]

• readonly属性适用的输入元素，并且是可变的（即没有指定readonly属性且未禁用的属性）
• 没有readonly属性且未禁用的textarea元素
• 编辑主机或可编辑的元素，既不是输入元素也不是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>