blocks|key|413157|text|input[readonly]
{
++++background-color:blue;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|413158|https://curtistimson.co.uk/post/css/style-readonly-attribute-css/|unstyled|offset|length|413159|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1T|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|Q|8|@]|9|@$G|R|H|S|1|T]]|A|$]]|$1|I|3|-4|5|F|7|U|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|E]]]]

<pre><code>input[readonly]
{
 background-color:blue;
}
</code></pre>

<a href="https://curtistimson.co.uk/post/css/style-readonly-attribute-css/" rel="noreferrer">https://curtistimson.co.uk/post/css/style-readonly-attribute-css/</a>

blocks|key|628417|text|使用以下命令可在所有浏览器中工作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|628418|+var+readOnlyAttr+=+$('.textBoxClass').attr('readonly');
++++if+(typeof+readOnlyAttr+!==+'undefined'+&&+readOnlyAttr+!==+false)+{
++++++++$('.textBoxClass').addClass('locked');
++++}|code-block|syntax|javascript|628419|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Use the following to work in all browsers:

<pre><code> var readOnlyAttr = $('.textBoxClass').attr('readonly');
 if (typeof readOnlyAttr !== 'undefined' &amp;&amp; readOnlyAttr !== false) {
 $('.textBoxClass').addClass('locked');
 }
</code></pre>

blocks|key|413381|text|如果您通过id选择输入，然后在css中添加input[readonly="readonly"]标签，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|413382|+#inputID+input[readonly="readonly"]+{
+++++background-color:+#000000;
+}|code-block|syntax|javascript|413383|这是行不通的。您必须选择一个父类或id，然后选择输入。类似于：|413384|+.parentClass,+#parentID+input[readonly="readonly"]+{
+++++background-color:+#000000;
+}|413385|我在工作中等待新门票时的2分钱：|413386|entityMap^0|L|Q|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|Y|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|R|$]]

If you select the input by the id and then add the <code>input[readonly="readonly"]</code> tag in the css, something like:

<pre><code> #inputID input[readonly="readonly"] {
 background-color: #000000;
 }
</code></pre>

That will not work. You have to select a parent class or id an then the input. Something like:

<pre><code> .parentClass, #parentID input[readonly="readonly"] {
 background-color: #000000;
 }
</code></pre>

My 2 cents while waiting for new tickets at work :D

blocks|key|413468|text|这里有很多答案，但我还没有看到我使用的答案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|413469|input[type="text"]:read-only+{+color:+blue;+}|code-block|syntax|javascript|413470|注意伪选择器中的破折号。如果输入是readonly="false"，它也会捕获它，因为无论值是什么，这个选择器都会捕获只读的存在。从技术上讲，根据规范，false是无效的，但互联网并不是一个完美的世界。如果你需要介绍这种情况，你可以这样做：|offset|length|style|CODE|413471|input[type="text"]:read-only:not([read-only="false"])+{+color:+blue;+}|413472|textarea的工作方式与此相同：|413473|textarea:read-only:not([read-only="false"])+{+color:+blue;+}|413474|请记住，html现在不仅支持type="text"，还支持许多其他文本类型，如number、tel、email、date、time、url等，每个文本类型都需要添加到选择器中。|413475|entityMap^0|0|0|H|G|24|5|0|0|0|8|0|0|E|B|13|6|1A|3|1E|5|1K|4|1P|4|1U|3|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@$I|Z|J|10|K|L]|$I|11|J|12|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|14|8|@$I|15|J|16|K|L]]|9|@]|A|$]]|$1|Q|3|R|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|18|8|@$I|19|J|1A|K|L]|$I|1B|J|1C|K|L]|$I|1D|J|1E|K|L]|$I|1F|J|1G|K|L]|$I|1H|J|1I|K|L]|$I|1J|J|1K|K|L]|$I|1L|J|1M|K|L]]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1N|8|@]|9|@]|A|$]]]|V|$]]

Loads of answers here, but haven't seen the one I use:

<pre><code>input[type="text"]:read-only { color: blue; }
</code></pre>

Note the dash in the pseudo selector. If the input is <code>readonly="false"</code> it'll catch that too since this selector catches the presence of readonly regardless of the value. Technically <code>false</code> is invalid according to specs, but the internet is not a perfect world. If you need to cover that case, you can do this:

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

<code>textarea</code> works the same way:

<pre><code>textarea:read-only:not([read-only="false"]) { color: blue; }
</code></pre>

Keep in mind that html now supports not only <code>type="text"</code>, but a slew of other textual types such a <code>number</code>, <code>tel</code>, <code>email</code>, <code>date</code>, <code>time</code>, <code>url</code>, etc. Each would need to be added to the selector.

blocks|key|413553|text|有几种方法可以做到这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|413554|第一种是使用最广泛的。它可以在所有主流浏览器上运行。|413555|input[readonly]+{
+background-color:+#dddddd;
}|code-block|syntax|javascript|413556|虽然上面的一个将选择所有附加了readonly的输入，但下面的这个将只选择您想要的。确保将demo替换为您想要的任何输入类型。|offset|length|style|CODE|413557|input[type="demo"]:read-only+{
+background-color:+#dddddd;
}|413558|这是第一种方法的替代方法，但并不是很常用：|413559|input:read-only+{
+background-color:+#dddddd;
}|413560|:read-only选择器在Chrome、Opera和Safari中都受支持。火狐使用:-moz-read-only。IE不支持:read-only选择器。|413561|您也可以使用input[readonly="readonly"]，但根据我的经验，这与input[readonly]非常相似。|413562|entityMap^0|0|0|0|F|8|19|4|0|0|0|0|0|A|17|F|1S|A|0|6|Q|17|F|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|13|8|@$K|14|L|15|M|N]|$K|16|L|17|M|N]]|9|@]|A|$]]|$1|O|3|P|5|F|7|18|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|19|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|1A|8|@]|9|@]|A|$G|H]]|$1|U|3|V|5|6|7|1B|8|@$K|1C|L|1D|M|N]|$K|1E|L|1F|M|N]|$K|1G|L|1H|M|N]]|9|@]|A|$]]|$1|W|3|X|5|6|7|1I|8|@$K|1J|L|1K|M|N]|$K|1L|L|1M|M|N]]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1N|8|@]|9|@]|A|$]]]|Z|$]]

There are a few ways to do this.

The first is the most widely used. It works on all major browsers.

<pre><code>input[readonly] {
 background-color: #dddddd;
}
</code></pre>

While the one above will select all inputs with <code>readonly</code> attached, this one below will select only what you desire. Make sure to replace <code>demo</code> with whatever input type you want.

<pre><code>input[type="demo"]:read-only {
 background-color: #dddddd;
}
</code></pre>

This is an alternate to the first, but it's not used a whole lot:

<pre><code>input:read-only {
 background-color: #dddddd;
}
</code></pre>

The <code>:read-only</code> selector is supported in Chrome, Opera, and Safari. Firefox uses <code>:-moz-read-only</code>. IE doesn't support the <code>:read-only</code> selector.

You can also use <code>input[readonly="readonly"]</code>, but this is pretty much the same as <code>input[readonly]</code>, from my experience.

blocks|key|413576|text|仅将的第一个字母大写|type|unstyled|depth|inlineStyleRanges|entityRanges|data|413577|​|413578|input[readOnly]+{
++++++background:+red+!important;
++++}|code-block|syntax|javascript|413579|<input+type="text"+name="country"+value="China"+readonly="readonly"+/>|413580|413581|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

capitalize the first letter of Only

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>input[readOnly] {
 background: red !important;
 }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="text" name="country" value="China" readonly="readonly" /&gt;</code></pre>
</div>
</div>

I'm currently using readonly=&quot;readonly&quot; to disable fields. I'm now trying to style the attribute using CSS. I've tried using
<pre><code>input[readonly] {
 /* styling info here */
}
</code></pre>
but it is not working for some reason. I've also tried
<pre><code>input[readonly='readonly'] {
 /* styling info here */
}
</code></pre>
that doesn't work either.
How can I style the readonly attribute with CSS?

How to style readonly attribute with CSS?

我目前正在使用readonly=“只读”来禁用字段。我现在正在尝试使用CSS设置属性的样式。我试过用input[readonly] {  /* styling info here */}但由于某些原因，它不起作用。我也试过input[readonly='readonly'] {  /* styling info her...

问如何使用CSS设置只读属性的样式？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CSS设置只读属性的样式？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CSS设置只读属性的样式？
EN