¿Es posible hacer que los campos de entrada sean de solo lectura a través de CSS?

No es posible (con los navegadores actuales) hacer un campo de entrada de solo lectura solo a través de CSS.

Aunque, como ya has mencionado, puedes aplicar el atributo readonly='readonly'.

Si su criterio principal es no alterar el marcado en la fuente, hay maneras de obtener esto, discretamente, con javascript.

Con jQuery, esto es fácil:

 $('input').attr('readonly', 'readonly');

O incluso con Javascript simple:

document.getElementById('someId').setAttribute('readonly', 'readonly');

No es realmente lo que necesita, pero puede ayudar y responder la pregunta aquí dependiendo de lo que desea lograr.

Puede evitar que todos los eventos de puntero se envíen a la entrada utilizando la propiedad CSS: pointer-events:none Añadirá una capa encima del elemento que le impedirá hacer clic en él ... También puede agregar un cursor:text al elemento padre para devolver el estilo del cursor de texto a la entrada ...

Útil, por ejemplo, cuando no se puede modificar el JS/HTML de un módulo.. y solo puede personalizarlo por css.

JSFIDDLE

Esto no es posible con css, pero he utilizado un truco css en uno de mi sitio web, por favor compruebe si esto funciona para usted.

El truco es: envuelva el cuadro de entrada con un div y hágalo relativo, coloque una imagen transparente dentro del div y hágalo absoluto sobre el cuadro de texto de entrada, de modo que nadie pueda editarlo.

Css

.txtBox{
    width:250px;
    height:25px;
    position:relative;
}
.txtBox input{
    width:250px;
    height:25px;
}
.txtBox img{
    position:absolute;
    top:0;
    left:0
}

Html

<div class="txtBox">
<input name="" type="text" value="Text Box" />
<img src="http://dev.w3.org/2007/mobileok-ref/test/data/ROOT/GraphicsForSpacingTest/1/largeTransparent.gif" width="250" height="25" alt="" />
</div>

JsFiddle File

CSS no puede establecer ningún comportamiento. La única manera de desactivar algo en CSS es hacerlo invisible, ya sea configurando display:none o simplemente poniendo div con img transparente por todas partes y cambiando sus órdenes z para desactivar el usuario centrándose en él con el ratón. Aunque, el usuario todavía será capaz de centrarse con la pestaña de otro campo.

No establece el comportamiento de los controles a través de CSS, solo su estilo.Puede usar jquery o simple javascript para cambiar la propiedad de los campos.

¿Por qué no ocultar el elemento input y reemplazarlo con un elemento label con el mismo contenido?

Me quedé perplejo sobre cómo la aplicación React TODOMVC logró esta misma cosa y esta es la estrategia que se les ocurrió.

Para verlo en acción, echa un vistazo a la aplicación a continuación, y ver las propiedades CSS de los elementos de TODO cuando haga doble clic en ellos y luego haga clic de distancia.

Http://todomvc.com/examples/react-backbone/#/

Cuando renderizas la página puedes tener cualquiera una entrada editable, o una etiqueta no editable con display: none; dependiendo de su consulta de medios.

Espero que esto ayude.

    input[readonly="readonly"]
{
    background-color:blue;
}

Referencia:

Http://jsfiddle.net/uzyH5/1 /