时间戳

首页 > 解决方案 > ：只读选择器不适用于选择标签？

html - ：只读选择器不适用于选择标签？

问题描述

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

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

标签： htmlcss

解决方案

您需要分配一个唯一标识符，例如 aclass或 anid来专门制作第一个选择标签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设置为值的属性来禁用选项卡焦点falseselect

此外，如果数据是只读的，则不应依赖从客户端传递的数据。您需要在后端进行适当的验证，以防止用户传递任何虚假或恶意数据。无论您使用什么，像上面这样简单的 HTML CSS 解决方案或使用 JavaScript 禁用键，您都无法阻止用户不更改标签的值。

推荐阅读