时间戳

首页 > 解决方案 > 只读伪类应用于单选按钮，在 Firefox 中不是只读的

html - 只读伪类应用于单选按钮，在 Firefox 中不是只读的

问题描述

我在使用 CSS 伪类时遇到问题:read-only。

使用 Firefox 时，伪类在输入不处于只读状态时被应用。我查看了 MDN doc :read-only并且似乎与 Firefox 兼容。

知道这是怎么回事吗？

input[type="radio"]:read-only {
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: red;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
<input type="radio" name="radio-1" value="false" />

标签： htmlcss

解决方案

支持

CSS 伪类:read-only得到很好的支持。
只有 IE 不支持它，如您所知，Microsoft 放弃了 IE 支持。
您可以在 MDN 上查看对 :read-only 的支持。

两个错误

  1. 支持 readonly 属性的 HTML 元素列表：

readonly 属性由 text、search、url、tel、email、 password、date、month、week、time、datetime-local和number 类型支持，并且表单控制元素。如果出现在这些输入类型和元素中的任何一个上， :read-only 伪类将匹配。如果不包含该属性，则 :read-write 伪类将匹配。

引用HTML 属性：MDN 上的只读页面

因此，它不适用于<input type="radio">

  1. HTML 元素需要 readonly 属性

为了使 CSS 伪类:read-only正常工作，您需要将readonly="readonly"属性添加到您的 html 元素。

例如：

<div class="group">
  <input type="textbox" value="Some value" readonly="readonly"/>
  <label>Textbox</label>
</div>

推荐阅读