¿Cómo deshabilito los campos de formulario usando CSS?

¿Es posible deshabilitar los campos de formulario usando CSS? Por supuesto, sé sobre el atributo deshabilitado, pero ¿es posible especificar esto en una regla CSS? Algo como -

<input type="text" name="username" value="admin" >
<style type="text/css">
  input[name=username] {
    disabled: true; /* Does not work */
  }
</style>

La razón por la que pregunto es que tengo una aplicación donde los campos del formulario se generan automáticamente y los campos se ocultan / muestran en función de algunas reglas (que se ejecutan en Javascript). Ahora quiero extenderlo para admitir los campos de deshabilitación / habilitación, pero la forma en que se escriben las reglas para manipular directamente las propiedades de estilo de los campos de formulario. Así que ahora tengo que extender el motor de reglas para cambiar los atributos, así como el estilo de los campos de formulario y de alguna manera parece menos que ideal.

Es muy curioso que tenga propiedades visibles y de visualización en CSS pero no habilite / deshabilite. ¿Hay algo parecido en el estándar HTML5 aún en obras, o incluso algo no estándar (específico del navegador)?

Esto puede ser útil:

<input type="text" name="username" value="admin" >

<style type="text/css">
input[name=username] {
    pointer-events: none;
 }
</style>

Actualizar:

y si desea deshabilitar el índice de pestañas, puede usarlo de esta manera:

 <input type="text" name="username" value="admin" tabindex="-1" >

 <style type="text/css">
  input[name=username] {
    pointer-events: none;
   }
 </style>

Puede fingir el efecto deshabilitado usando CSS.

pointer-events:none;

También es posible que desee cambiar los colores, etc.

Dado que las reglas se ejecutan en JavaScript, ¿por qué no deshabilitarlas usando javascript (o en mi caso de ejemplo, jQuery)?

$('#fieldId').attr('disabled', 'disabled'); //Disable
$('#fieldId').removeAttr('disabled'); //Enable

ACTUALIZAR

La attrfunción ya no es el enfoque principal para esto, como se señaló en los comentarios a continuación. Esto ahora se hace con la propfunción.

$( "input" ).prop( "disabled", true ); //Disable
$( "input" ).prop( "disabled", false ); //Enable

Es muy curioso que tenga propiedades visibles y de visualización en CSS pero no habilite / deshabilite.

Es muy curioso que creas que es muy curioso. Estás malinterpretando el propósito de CSS. CSS no está destinado a cambiar el comportamiento de los elementos del formulario. Está destinado a cambiar su estilo solamente. Ocultar un campo de texto no significa que el campo de texto ya no esté allí o que el navegador no enviará sus datos cuando envíe el formulario. Todo lo que hace es esconderlo de los ojos del usuario.

Para deshabilitar sus campos, debe usar el disabledatributo en HTML o la disabledpropiedad DOM en JavaScript.

No puede usar CSS para deshabilitar Textbox. La solución sería el atributo HTML.

disabled="disabled"

La solución práctica es usar CSS para ocultar realmente la entrada.

Para llevar esto a su conclusión natural, puede escribir dos entradas html para cada entrada real (una habilitada y otra deshabilitada) y luego usar JavaScript para controlar el CSS para mostrarlas y ocultarlas.

primera vez respondiendo algo, y aparentemente un poco tarde ...

Estoy de acuerdo en hacerlo por JavaScript, si ya lo está utilizando.

Para una estructura compuesta, como uso habitualmente, hice un pseudo elemento css para bloquear los elementos de la interacción del usuario y permitir el estilo sin tener que manipular toda la estructura.

Por ejemplo:

<div id=test class=stdInput>
    <label class=stdInputLabel for=selecterthingy>A label for this input</label>
    <label class=selectWrapper>
         <select id=selecterthingy>
             <option selected disabled>Placeholder</option>
             <option value=1>Option 1</option>
             <option value=2>Option 2</option>
         </select>
    </label>
</div>

Puedo colocar un disabled clase en el envoltoriodiv

.disabled { 
    position : relative; 
    color    : grey;
}
.disabled:after {
    position :absolute;
    left     : 0;
    top      : 0;
    width    : 100%;
    height   : 100%;
    content  :' ';
}

Esto sería texto gris dentro del div y lo haría inutilizable para el usuario.

Mi ejemplo JSFiddle

Siempre estoy usando:

input.disabled {
    pointer-events:none;
    color:#AAA;
    background:#F5F5F5;
}

y luego aplicando la clase css al campo de entrada:

<input class="disabled" type="text" value="90" name="myinput" id="myinput" />

input [nombre = nombre de usuario] {deshabilitado: verdadero; /* No funciona */ }

Sé que esta pregunta es bastante antigua, pero para otros usuarios que se encuentran con este problema, supongo que la forma más fácil de desactivar la entrada es simplemente ': disabled'

<input type="text" name="username" value="admin" disabled />
<style type="text/css">
  input[name=username]:disabled {
    opacity: 0.5 !important; /* Fade effect */
    cursor: not-allowed; /* Cursor change to disabled state*/
  }
</style>

En realidad, si tiene algún script para deshabilitar la entrada de forma dinámica / automática con javascript o jquery que se deshabilitaría automáticamente según la condición que agregue.

En jQuery por ejemplo:

if (condition) {
// Make this input prop disabled state
  $('input').prop('disabled', true);
}
else {
// Do something else
}

Espero que la respuesta en CSS ayude.

Me temo que no puede hacer eso, pero puede hacer lo siguiente en jQuery, si no desea agregar los atributos a los campos. Simplemente coloque esto dentro de su <head></head>etiqueta

$(document).ready(function(){ 
  $(".inputClass").focus(function(){
    $(this).blur();
  }); 
});

Si está generando los campos en el DOM (con JS), debe hacer esto en su lugar:

$(document).ready(function(){ 
  $(document).on("focus", ".inputClass", function(){
    $(this).blur();
  }); 
});

Esto se puede hacer para un propósito no crítico colocando una superposición encima de su elemento de entrada. Aquí está mi ejemplo en HTML puro y CSS.

https://jsfiddle.net/1tL40L99/

    <div id="container">
        <input name="name" type="text" value="Text input here" />
        <span id="overlay"></span>
    </div>

    <style>
        #container {
            width: 300px;
            height: 50px;
            position: relative;
        }
        #container input[type="text"] {
            position: relative;
            top: 15px;
            z-index: 1;
            width: 200px;
            display: block;
            margin: 0 auto;
        }
        #container #overlay {
            width: 300px;
            height: 50px;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 2;
            background: rgba(255,0,0, .5);
        }
    </style>

No hay forma de usar CSS para este propósito. Mi consejo es incluir un código javascript donde asignes o cambies la clase css aplicada a las entradas. Algo como eso :

function change_input() {
	$('#id_input1')
		.toggleClass('class_disabled')
		.toggleClass('class_enabled');
		
	$('.class_disabled').attr('disabled', '');
	$('.class_enabled').removeAttr('disabled', '');
}

.class_disabled { background-color : #FF0000; }
.class_enabled { background-color : #00FF00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form> 	
	Input: <input id="id_input1" class="class_enabled" />		
	<input type="button" value="Toggle" onclick="change_input()";/>	
</form>

Una variación de la pointer-events: none;solución, que resuelve el problema de que la entrada aún sea accesible a través de su control etiquetado o tabindex, es envolver la entrada en un div, que tiene el estilo de entrada de texto deshabilitada, y configurarla input { visibility: hidden; }cuando la entrada está "deshabilitada" .
Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values

div.dependant {
  border: 0.1px solid rgb(170, 170, 170);
  background-color: rgb(235,235,228);
  box-sizing: border-box;
}
input[type="checkbox"]:not(:checked) ~ div.dependant:first-of-type {
  display: inline-block;
}
input[type="checkbox"]:checked ~ div.dependant:first-of-type {
  display: contents;
}
input[type="checkbox"]:not(:checked) ~ div.dependant:first-of-type > input {
  visibility: hidden;
}

<form>
  <label for="chk1">Enable textbox?</label>
  <input id="chk1" type="checkbox" />
  <br />
  <label for="text1">Input textbox label</label>
  <div class="dependant">
    <input id="text1" type="text" />
  </div>
</form>

El estilo deshabilitado aplicado en el fragmento anterior se toma de la interfaz de usuario de Chrome y puede no ser visualmente idéntico a las entradas deshabilitadas en otros navegadores. Posiblemente se puede personalizar para navegadores individuales utilizando prefijos de extensión CSS específicos del motor. Aunque de un vistazo, no creo que pueda:
extensiones CSS de Microsoft , extensiones CSS de Mozilla , extensiones CSS de WebKit

Parecería mucho más sensato para introducir un valor adicional visibility: disabledo display: disabledo tal vez incluso appearance: disabled, teniendo en cuenta que visibility: hiddenya afecta el comportamiento de los elementos aplicables los elementos de control asociados.