Question

我一直在尝试将select标签设为只读，这意味着它不应该是可选择的，当我尝试将属性添加为readonly时，它可以正常工作，但它也适用于没有readonly属性的select标签，我认为我m没有正确应用选择器，

我不能将其设置为禁用，因为它不会与表单详细信息一起提交，这是我在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，因为它不能被用户明确地编辑。

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


input 元素，该元素适用于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>

：只读选择器无法在选择代码上使用？

2 个答案: