¿Cómo diseñar el atributo de solo lectura con CSS?

Actualmente estoy usando readonly="readonly" para deshabilitar campos. Ahora estoy tratando de diseñar el atributo usando CSS. he intentado usar

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

pero no funciona por alguna razón. yo también he intentado

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

eso tampoco funciona.

¿Cómo puedo diseñar el atributo de solo lectura con CSS?

preguntado el 09 de marzo de 12 a las 14:03

input[readonly] Deberia trabajar. Asegúrese de que no esté siendo anulado por otros selectores más específicos en otra parte de su hoja de estilo. -

si desea deshabilitar, use el atributo deshabilitado y no solo lectura -

@SvenBieder Readonly y disabled tienen un comportamiento completamente diferente. Los campos de solo lectura se envían al servidor al enviar el formulario, mientras que los campos deshabilitados no lo son. -

input[readonly='readonly'] solo funcionará si usa HTML como <input readonly="readonly">, no por ej. <input readonly>. input[readonly] debe coincidir con ambos. -

!important debería funcionar para anular, a menos que también tenga !important en la clase de ajuste? -

9 Respuestas

Respondido 21 ago 17, 18:08

Deberías usar input[readonly] en lugar de readonly es un atributo booleano que no está diseñado para tener un valor específico. - PernoReloj

@BoltClock Sí. Consulte la resolución en la respuesta a continuación. - amigo r

¿Cómo puedo hacer que se pueda escribir de nuevo? ¿Simplemente eliminando el estilo de clase? - renaro santos

@RenaroSantos Eso es un cambio de HTML. Eliminar readonly="readonly" a partir de su input elemento. - Brusco

con IE7, aún puede usar el selector con jQuery - la despedida

Tenga en cuenta que textarea[readonly="readonly"] funciona si configuras readonly="readonly" en HTML pero NO funciona si establece el readOnly-atribuir a true or "readonly" a través de JavaScript.

Para que funcione el selector de CSS si te pones readOnly con JavaScript tienes que usar el selector textarea[readonly].

Mismo comportamiento en Firefox 14 y Chrome 20.

Para estar seguro, uso ambos selectores.

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

Respondido 06 ago 12, 20:08

También puede usar textarea[readonly] en cambio - cada textarea[readonly="readonly"] está garantizado para igualar eso. - PernoReloj

Para estar seguro, es posible que desee utilizar ambos...

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

El atributo de solo lectura es un "atributo booleano", que puede estar en blanco o "solo lectura" (los únicos valores válidos). http://www.whatwg.org/specs/web-apps/current-work/#boolean-attribute

Si está usando algo como jQuery's .prop('readonly', true) función, terminará necesitando [readonly], mientras que si está utilizando .attr("readonly", "readonly") entonces necesitarás [readonly="readonly"].


Corrección: Solo necesitas usar input[readonly]. Incluso input[readonly="readonly"] es redundante Ver https://stackoverflow.com/a/19645203/1766230

contestado el 23 de mayo de 17 a las 13:05

Un montón de respuestas aquí, pero no he visto la que uso:

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

Tenga en cuenta el guión en el pseudoselector. Si la entrada es readonly="false" también lo detectará, ya que este selector detecta la presencia de solo lectura independientemente del valor. Técnicamente false no es válido según las especificaciones, pero Internet no es un mundo perfecto. Si necesita cubrir ese caso, puede hacer esto:

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

textarea funciona de la misma manera:

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

Tenga en cuenta que html ahora admite no solo type="text", pero una gran cantidad de otros tipos textuales como number, tel, email, date, time, url, etc. Cada uno debería agregarse al selector.

Respondido 11 Feb 15, 10:02

Yo tampoco. LOL ¡Sí, tienes razón! Por ahora. :read-only y otros selectores de psuedo se han agregado al estándar W3C y se pueden usar con las versiones preliminares de IE 10 10547 y superiores. - IAmNaN

Hay algunas formas de hacer esto.

El primero es el más utilizado. Funciona en todos los principales navegadores.

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

Mientras que el de arriba seleccionará todas las entradas con readonly adjunto, este a continuación seleccionará solo lo que desee. Asegúrese de reemplazar demo con cualquier tipo de entrada que desee.

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

Esta es una alternativa a la primera, pero no se usa mucho:

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

El :read-only selector es compatible con Chrome, Opera y Safari. usos de firefox :-moz-read-only. IE no es compatible con el :read-only selector.

También puedes usar input[readonly="readonly"], pero esto es más o menos lo mismo que input[readonly], por mi experiencia.

contestado el 29 de mayo de 18 a las 18:05

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

debe cubrir todos los casos para un campo de entrada de solo lectura...

Respondido el 11 de junio de 15 a las 10:06

input:read-only es la "pseudoclase de mutabilidad que tiene como objetivo facilitar el diseño de formularios en función de los atributos HTML deshabilitados, de solo lectura y editables". Como se menciona aquí, css-tricks.com/almanac/selectors/r/read-write-read, varias implementaciones son bastante inestables. - repetidor

Esto es extraño, pero solo la entrada [solo lectura] funcionó para mí en FF 58 - Pavel_K

poner en mayúscula la primera letra de Only

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

Respondido 21 Feb 19, 02:02

Si selecciona la entrada por el id y luego agrega el input[readonly="readonly"] etiqueta en el css, algo como:

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

Eso no funcionará. Debe seleccionar una clase principal o una identificación y luego la entrada. Algo como:

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

Mis 2 centavos mientras espero nuevos boletos en el trabajo :D

Respondido 05 Feb 15, 10:02

"Si selecciona la entrada por la identificación", que no es el OP, entonces, ¿cómo es esto relevante? Incluso si fuera el caso, estás equivocado, solo necesitas eliminar el combinador descendiente. - Quentin

AH ok, ¿quieres decir que tengo que escribir algo como input[readonly="readonly"]#inputID ? /yo tonto.. tienes razon - juego de software

Use lo siguiente para trabajar en todos los navegadores:

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

Respondido 22 Abr '13, 16:04

Entonces, espero que su público objetivo no esté en ese 2%. - Bacco

¿Qué incluye la clase 'bloqueada'? - AdiT

$('.textBoxClass').addClass('locked') incluirá 'locked' - amigo r

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.