---
title: ':read-only'
slug: 'Web/CSS/:read-only'
tags:
  - CSS
  - Layout
  - Pseudo-class
  - Reference
  - Web
translation_of: 'Web/CSS/:read-only'
---
<div>{{CSSRef}}</div>

<p>La <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class </a><a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:read-only</code></strong> <span id="result_box" lang="ca"><span>representa un element (com ara una entrada de text bloquejat) que no és editable per l'usuari.</span></span></p>

<pre class="brush: css no-line-numbers">/* <span id="result_box" lang="ca"><span>Selecciona qualsevol element &lt;input&gt; que sigui de només lectura Compatible amb Firefox amb un prefix</span></span> */
input:-moz-read-only {
  background-color: #ccc;
}

/* <span id="result_box" lang="ca"><span>Compatible amb Blink/WebKit/Edge sense un prefix</span></span> */
input:read-only {
  background-color: #ccc;
}</pre>

<div class="note">
<p><strong>Nota</strong>: <span id="result_box" lang="ca"><span>Aquest selector no només selecciona</span></span> {{htmlElement("input")}}s amb {{htmlattrxref("readonly", "input")}} <span id="result_box" lang="ca"><span>establerts en ells;</span> <span>seleccionarà qualsevol element que no pugui ser editat per l'usuari.</span></span></p>
</div>

<h2 id="Sintaxi">Sintaxi</h2>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Example" name="Example">Exemple</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;input type="text" value="Type whatever you want here."&gt;
&lt;input type="text" value="This is a read-only field." readonly&gt;
&lt;p&gt;This is a normal paragraph.&lt;/p&gt;
&lt;p contenteditable="true"&gt;You can edit this paragraph!&lt;/p&gt;</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">input { min-width: 25em; }
input:-moz-read-only { background: cyan; }
input:read-only { background: cyan; }

p:-moz-read-only { background: lightgray; }
p:read-only { background: lightgray; }
p[contenteditable="true"] { color: blue; }
</pre>

<h3 id="Resultat">Resultat</h3>

<p>{{EmbedLiveSample("Example")}}</p>

<h2 class="editable" id="Specifications" name="Specifications">Especificacions</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificació</th>
   <th scope="col">Estat</th>
   <th scope="col">Comentari</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('HTML WHATWG', '#selector-read-only', ':read-only') }}</td>
   <td>{{ Spec2('HTML WHATWG') }}</td>
   <td>Sense canvis.</td>
  </tr>
  <tr>
   <td>{{ SpecName('HTML5 W3C', '#selector-read-only', ':read-only') }}</td>
   <td>{{ Spec2('HTML5 W3C') }}</td>
   <td><span id="result_box" lang="ca"><span>Defineix la semàntica respecte a l'HTML i la validació de restriccions.</span></span></td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-only') }}</td>
   <td>{{ Spec2('CSS4 Selectors') }}</td>
   <td><span id="result_box" lang="ca"><span>Defineix</span> <span>la</span> <span>pseudo</span><span>-</span><span>classe,</span> <span>però no</span> <span>la semàntica</span> <span>associada.</span></span></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Navegadors compatibles</h2>



<p>{{Compat("css.selectors.read-only")}}</p>

<h2 id="See_also" name="See_also">Vegeu també</h2>

<ul>
 <li>{{cssxref(":read-write")}}</li>
 <li>Atribut HTML {{htmlattrxref("contenteditable")}}</li>
</ul>