如何使用 CSS 样式化只读属性？

我目前使用 readonly = “ readonly”来禁用字段

input[readonly] {
/* styling info here */
}

但不知道为什么没用，我也试过了

input[readonly='readonly'] {
/* styling info here */
}

那也没用。

如何使用 CSS 设置 readonly 属性的样式？

307103 次浏览
小开 
input[readonly]
{
background-color:blue;
}

Https://curtistimson.co.uk/post/css/style-readonly-attribute-css/

小开

注意，如果在 HTML 中设置 readonly="readonly"，那么 textarea[readonly="readonly"]可以工作，但是如果通过 JavaScript 将 readOnly-属性设置为 true或 "readonly"，那么它就不能工作。

为了让 CSS 选择器工作于 如果使用 JavaScript 设置 readOnly，您必须使用选择器 textarea[readonly]。

同样的行为在 Firefox 14和 Chrome 20中。

为了安全起见，我用了两个选择器。

textarea[readonly="readonly"], textarea[readonly] {
...
}
小开

在所有浏览器中使用以下命令:

 var readOnlyAttr = $('.textBoxClass').attr('readonly');
if (typeof readOnlyAttr !== 'undefined' && readOnlyAttr !== false) {
$('.textBoxClass').addClass('locked');
}
小开

为了安全起见，你可能需要同时使用..。

input[readonly], input[readonly="readonly"] {
/*styling info here*/
}

Readonly 属性是一个“ boolean 属性”，它可以是空的，也可以是“ readonly”(唯一有效的值)

如果您使用类似 jQuery 的 .prop('readonly', true)函数，那么您最终将需要 [readonly]，而如果您使用 .attr("readonly", "readonly")，那么您将需要 [readonly="readonly"]。

更正: 你只需要使用 input[readonly]。包括 input[readonly="readonly"]是多余的。参见 https://stackoverflow.com/a/19645203/1766230

小开

如果您通过 id 选择输入，然后在 css 中添加 input[readonly="readonly"]标记，类似于:

 #inputID input[readonly="readonly"] {
background-color: #000000;
}

这样不行。你必须选择一个父类或者 id 然后输入。比如:

 .parentClass, #parentID input[readonly="readonly"] {
background-color: #000000;
}

我上班等新票时的2分钱: D

小开

这里有很多答案，但还没看到我用的那个:

input[type="text"]:read-only { color: blue; }

注意伪选择器中的破折号。如果输入是 readonly="false"，那么它也会捕获这个值，因为这个选择器捕获 readonly 的存在，而不管这个值是什么。技术上 false是无效的根据规格，但互联网并不是一个完美的世界。如果你需要报道那个案子，你可以这样做:

input[type="text"]:read-only:not([read-only="false"]) { color: blue; }

textarea的工作原理与此相同:

textarea:read-only:not([read-only="false"]) { color: blue; }

请记住，html 现在不仅支持 type="text"，而且还支持大量其他文本类型，如 number、 tel、 email、 date、 time、 url等。每个都需要添加到选择器中。

小开 
input[readonly], input:read-only {
/* styling info here */
}

应该覆盖 所有的案子为一个只读输入字段..。

小开

有几种方法可以做到这一点。

第一个是使用最广泛的，它适用于所有主流浏览器。

input[readonly] {
background-color: #dddddd;
}

虽然上面的一个将选择与 readonly附加的所有输入，这下面的一个将只选择你想要的。确保用您想要的任何输入类型替换 demo。

input[type="demo"]:read-only {
background-color: #dddddd;
}

这是第一个版本的替代版，但是并没有经常使用:

input:read-only {
background-color: #dddddd;
}

Chrome、 Opera 和 Safari 都支持 :read-only选择器。 Firefox 使用 :-moz-read-only。 IE 不支持 :read-only选择器。

你也可以使用 input[readonly="readonly"]，但是根据我的经验，这和 input[readonly]几乎是一样的。

小开

唯一的第一个字母大写

input[readOnly] {
background: red !important;
}
<input type="text" name="country" value="China" readonly="readonly" />


提交答案