Css: ejemplo de solo lectura

Él :read-onlyCSSpseudo-clase representa un elemento (como input o textarea) que no es editable por el usuario.

input:read-only, textarea:read-onlybackground-color: #ccc;p:read-onlybackground-color: #ccc;

Sintaxis

:read-only

Ejemplos

Confirmación de la información del formulario en los controles de solo lectura/lectura y escritura

un uso de readonly controles de formulario es permitir que el usuario verifique y verifique la información que puede haber ingresado en un formulario anterior (por ejemplo, detalles de envío), al mismo tiempo que puede enviar la información junto con el resto del formulario. Hacemos precisamente esto en el siguiente ejemplo.

Él :read-only pseudo-clase se usa para eliminar todo el estilo que hace que las entradas parezcan campos en los que se puede hacer clic, haciéndolos parecer más como párrafos de solo lectura. :read-write la pseudoclase, por otro lado, se usa para proporcionar un estilo más agradable al editable </code>.</p> <pre data-language="css"><span>input:-moz-read-only, textarea:-moz-read-only, input:read-only, textarea:read-only</span><span></span><span>border</span><span>:</span> 0<span>;</span><span>box-shadow</span><span>:</span> none<span>;</span><span>background-color</span><span>:</span> white<span>;</span><span></span><span>textarea:-moz-read-write, textarea:read-write</span><span></span><span>box-shadow</span><span>:</span> inset 1px 1px 3px #ccc<span>;</span><span>border-radius</span><span>:</span> 5px<span>;</span><span></span></pre> <p>Puede encontrar el código fuente completo en <a rel="nofollow noopener" target="_blank" href="https://github.com/mdn/learning-area/blob/master/html/forms/pseudo-classes/readonly-confirmation.html">readonly-confirmation.html</a>; esto se traduce así:</p> <p><iframe height="660" loading="lazy" src="https://mdn.github.io/learning-area/html/forms/pseudo-classes/readonly-confirmation.html" width="100%"></iframe></p> <h3>Dar estilo a los controles sin formato de solo lectura</h3> <p>Este selector no solo selecciona <a rel="nofollow noopener" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input"><code><input></code></a>/<a rel="nofollow noopener" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea"><code><textarea></code></a> elementos: seleccionará <em>ninguna</em> elemento que no puede ser editado por el usuario.</p><div class="1156288aeb31a138c38144f0e15ac7e5" data-index="5" style="float: none; margin:5px 0 5px 0; text-align:center;"> <!-- in-feed-foroayuda --> <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-fj+41+cd-aa-ix" data-ad-client="ca-pub-9156923925267699" data-ad-slot="3077514231"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div> <pre data-language="html"><span><span><span><</span>p</span><span>contenteditable</span><span>></span></span>This paragraph is editable; it is read-write.<span><span><span></</span>p</span><span>></span></span><span><span><span><</span>p</span><span>></span></span>This paragraph is not editable; it is read-only.<span><span><span></</span>p</span><span>></span></span></pre> <pre data-language="css"><span>p</span><span></span><span>font-size</span><span>:</span> 150%<span>;</span><span>padding</span><span>:</span> 5px<span>;</span><span>border-radius</span><span>:</span> 5px<span>;</span><span></span><span>p:read-only</span><span></span><span>background-color</span><span>:</span> red<span>;</span><span>color</span><span>:</span> white<span>;</span><span></span><span>p:read-write</span><span></span><span>background-color</span><span>:</span> lime<span>;</span><span></span></pre> <p><iframe height="400" loading="lazy" src="https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Web/CSS/:read-only/_samples_/Styling_read-only_non-form_controls" width="100%"></iframe></p> <h2>Especificaciones</h2> <table> <thead> <tr> <th scope="col">Especificación</th> <th scope="col">Estado</th> <th scope="col">Comentario</th> </tr> </thead> <tbody> <tr> <td><a rel="nofollow noopener" target="_blank" href="https://html.spec.whatwg.org/multipage/#selector-read-only" hreflang="en">Estándar de vida HTML<br /><small>La definición de ‘: solo lectura’ en esa especificación.</small></a></td> <td><span>Estándar de vida</span></td> <td>Ningún cambio.</td> </tr> <tr> <td><a rel="nofollow noopener" target="_blank" href="https://www.w3.org/TR/html52/#selector-read-only" hreflang="en">HTML5<br /><small>La definición de ‘: solo lectura’ en esa especificación.</small></a></td> <td><span>Recomendación</span></td> <td>Define la semántica con respecto a HTML y la validación de restricciones.</td> </tr> <tr> <td><a rel="nofollow noopener" target="_blank" href="https://drafts.csswg.org/selectors-4/#rw-pseudos" hreflang="en">Selectores Nivel 4<br /><small>La definición de ‘: solo lectura’ en esa especificación.</small></a></td> <td><span>Borrador de Trabajo</span></td> <td>Define la pseudoclase, pero no la semántica asociada.</td> </tr> </tbody> </table> <h2>Compatibilidad del navegador</h2> <table> <thead> <tr> <th></th> <th colspan="6">Escritorio</th> <th colspan="6">Móvil</th> </tr> <tr> <th></th> <th>Cromo</th> <th>Borde</th> <th>Firefox</th> <th>explorador de Internet</th> <th>Ópera</th> <th>Safari</th> <th>WebView Android</th> <th>cromo androide</th> <th>Firefox para Android</th> <th>Ópera Android</th> <th>Safari en IOS</th> <th>Samsung Internet</th> </tr> </thead> <tbody> <tr> <th><code>:read-only</code></th> <td>1</td> <td>13</td> <td>781.5</td> <td>No</td> <td>9</td> <td>4</td> <td>≤37</td> <td>18</td> <td>4</td> <td>10.1</td> <td>3.2</td> <td>1.0</td> </tr> </tbody> </table> <h2>Ver también</h2> <ul> <li><code>:read-write</code></li> <li>HTML <a rel="nofollow noopener" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#attr-contenteditable"><code>contenteditable</code></a> attribute</li> </ul> <p></main></p> <p>Recuerda que puedes dar recomendación a este artículo si te fue de ayuda.</p> <div class="1156288aeb31a138c38144f0e15ac7e5" data-index="4" style="float: none; margin:5px 0 5px 0; text-align:center;"> <!-- multiplex-ads --> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-9156923925267699" data-ad-slot="3776158861"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div> <div style="font-size: 0px; height: 0px; line-height: 0px; margin: 0; padding: 0; clear: both;"></div><div style="text-align:center" class="yasr-auto-insert-visitor"><!--Yasr Visitor Votes Shortcode--><div id='yasr_visitor_votes_5c366f6014d26' class='yasr-visitor-votes'><div class="yasr-custom-text-vv-before yasr-custom-text-vv-before-40437">¡Haz clic para puntuar esta entrada!</div><div id='yasr-vv-second-row-container-5c366f6014d26' class='yasr-vv-second-row-container'><div id='yasr-visitor-votes-rater-5c366f6014d26' class='yasr-rater-stars-vv' data-rater-postid='40437' data-rating='0' data-rater-starsize='32' data-rater-readonly='false' data-rater-nonce='87d5be97ca' data-issingular='true' ></div><div class="yasr-vv-stats-text-container" id="yasr-vv-stats-text-container-5c366f6014d26"><svg xmlns="https://www.w3.org/2000/svg" width="20" height="20" class="yasr-dashicons-visitor-stats" data-postid="40437" id="yasr-stats-dashicon-5c366f6014d26"> <path d="M18 18v-16h-4v16h4zM12 18v-11h-4v11h4zM6 18v-8h-4v8h4z"></path> </svg><span id="yasr-vv-text-container-5c366f6014d26" class="yasr-vv-text-container">(Votos: <span id="yasr-vv-votes-number-container-5c366f6014d26">0</span> Promedio: <span id="yasr-vv-average-container-5c366f6014d26">0</span>)</span></div><div id='yasr-vv-loader-5c366f6014d26' class='yasr-vv-container-loader'></div></div><div id='yasr-vv-bottom-container-5c366f6014d26' class='yasr-vv-bottom-container' style='display:none'></div></div><!--End Yasr Visitor Votes Shortcode--></div></p><hr><div class="tags"><span><b>Tags :</b></span><a href="https://foroayuda.es/tag/css-selectors/" rel="tag"> Css Selectors </a> / </div><hr><h4 style="text-align: center !important;">Utiliza Nuestro Buscador</h4><script async src="https://cse.google.com/cse.js?cx=a429be4a2ea07f9cf"></script><div class="gcse-search"></div><div class="crp_related crp-text-only"><h3>Preguntas Relacionadas:</h3><ul><li><a href="https://foroayuda.es/como-dividir-transacciones-de-solo-lectura-y-lectura-escritura-con-jpa-e-hibernate/" class="crp_link post-47790"><span class="crp_title">Cómo dividir transacciones de solo lectura y…</span></a></li><li><a href="https://foroayuda.es/no-se-puede-abrir-dev-sdb-lectura-escritura-sistema-de-archivos-de-solo-lectura/" class="crp_link post-33614"><span class="crp_title">No se puede abrir / dev / sdb lectura-escritura (sistema de…</span></a></li><li><a href="https://foroayuda.es/la-base-de-datos-no-se-puede-actualizar-porque-es-de-solo-lectura-o-tiene-archivos-de-solo-lectura-haga-que-la-base-de-datos-o-los-archivos-se-puedan-escribir-y-vuelva-a-ejecutar-la-recuperacion/" class="crp_link post-17145"><span class="crp_title">La base de datos no se puede actualizar porque es de solo…</span></a></li><li><a href="https://foroayuda.es/ansible-fortinet-fortimanager-fmgr_dvmdb_device-tabla-de-dispositivos-la-mayoria-de-los-atributos-son-de-solo-lectura-y-solo-se-pueden-cambiar-internamente-consulte-el-modulo-de-comando-del-admin/" class="crp_link post-12834"><span class="crp_title">Ansible fortinet.fortimanager.fmgr_dvmdb_device: tabla de…</span></a></li><li><a href="https://foroayuda.es/hacer-publico-el-cubo-de-s3-ejemplo-de-codigo-de-solo-lectura/" class="crp_link post-23734"><span class="crp_title">Hacer público el cubo de s3 ejemplo de código de solo…</span></a></li><li><a href="https://foroayuda.es/vscode-no-puede-editar-en-el-ejemplo-de-codigo-del-editor-de-solo-lectura/" class="crp_link post-32720"><span class="crp_title">vscode no puede editar en el ejemplo de código del editor de…</span></a></li><li><a href="https://foroayuda.es/como-hacer-que-el-boton-sea-de-solo-lectura-en-el-ejemplo-de-codigo-jquery/" class="crp_link post-50177"><span class="crp_title">cómo hacer que el botón sea de solo lectura en el ejemplo de…</span></a></li><li><a href="https://foroayuda.es/chmod-cambio-de-permisos-de-mnt-ejemplo-de-codigo-de-sistema-de-archivos-de-solo-lectura/" class="crp_link post-28413"><span class="crp_title">chmod: cambio de permisos de 'mnt': ejemplo de código de…</span></a></li><li><a href="https://foroayuda.es/propiedad-de-solo-lectura-de-python/" class="crp_link post-51205"><span class="crp_title">Propiedad de solo lectura de Python</span></a></li><li><a href="https://foroayuda.es/propiedades-de-solo-lectura-y-ngoninit/" class="crp_link post-51212"><span class="crp_title">propiedades de solo lectura y ngOnInit</span></a></li><li><a href="https://foroayuda.es/mostrar-un-campo-de-solo-lectura-en-asp-net-core/" class="crp_link post-19536"><span class="crp_title">Mostrar un campo de solo lectura en ASP.NET Core</span></a></li><li><a href="https://foroayuda.es/mysql-otorgar-opciones-de-solo-lectura/" class="crp_link post-19853"><span class="crp_title">MySql: ¿Otorgar opciones de solo lectura?</span></a></li></ul><div class="crp_clear"></div></div> <div class="banner desktop"> <div class="center fluid"> </div> </div> <div class="banner mobile"> <div class="center fluid"> </div> </div> <footer class="entry-footer"> <div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3>Deja una respuesta <small><a rel="nofollow" id="cancel-comment-reply-link" href="/css-ejemplo-de-solo-lectura/#respond" style="display:none;">Cancelar la respuesta</a></small></h3><form action="https://foroayuda.es/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Tu dirección de correo electrónico no será publicada.</span> <span class="required-field-message">Los campos obligatorios están marcados con <span class="required">*</span></span></p><textarea id="comment" name="comment" cols="45" rows="1" required>

Nombre *