Como desabilito os campos de formulário usando CSS?

É possível desativar os campos do formulário usando CSS? Claro que conheço o atributo desativado, mas é possível especificar isso em uma regra CSS? Algo como -

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

A razão pela qual estou perguntando é que, eu tenho um aplicativo em que os campos do formulário são gerados automaticamente e os campos são ocultos / exibidos com base em algumas regras (que são executadas em Javascript). Agora eu quero estendê-lo para oferecer suporte a campos de desativação / ativação, mas a maneira como as regras são escritas para manipular diretamente as propriedades de estilo dos campos de formulário. Então agora eu tenho que estender o mecanismo de regras para alterar os atributos, bem como o estilo dos campos de formulário e, de alguma forma, parece menos do que o ideal.

É muito curioso que você tenha propriedades visíveis e de exibição em CSS, mas não ative / desative. Existe algo parecido no padrão HTML5 ainda em andamento ou mesmo algo fora do padrão (específico do navegador)?

Isso pode ser útil:

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

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

Atualizar:

e se quiser desativar o índice da guia, você pode usá-lo desta maneira:

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

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

Você pode fingir o efeito desativado usando CSS.

pointer-events:none;

Você também pode querer mudar as cores etc.

Como as regras estão sendo executadas em JavaScript, por que não desativá-las usando javascript (ou, no meu caso de exemplo, jQuery)?

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

ATUALIZAR

A attrfunção não é mais a principal abordagem para isso, como foi apontado nos comentários abaixo. Agora isso é feito com a propfunção

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

É muito curioso que você tenha propriedades visíveis e de exibição em CSS, mas não ative / desative.

É muito curioso que você ache isso muito curioso. Você está entendendo mal o propósito do CSS. CSS não pretende alterar o comportamento dos elementos do formulário. É para mudar apenas o estilo deles . Ocultar um campo de texto não significa que ele não esteja mais lá ou que o navegador não enviará seus dados quando você enviar o formulário. Tudo o que faz é esconder dos olhos do usuário.

Para realmente desativar seus campos, você deve usar o disabledatributo em HTML ou a disabledpropriedade DOM em JavaScript.

Você não pode usar CSS para desativar a Caixa de texto. solução seria o atributo HTML.

disabled="disabled"

A solução prática é usar CSS para realmente ocultar a entrada.

Para levar isso à sua conclusão natural, você pode escrever duas entradas html para cada entrada real (uma ativada e outra desativada) e usar o javascript para controlar o CSS para mostrá-las e ocultá-las.

primeira vez respondendo a algo, e aparentemente um pouco tarde ...

Aceito fazê-lo por javascript, se você já estiver usando.

Para uma estrutura composta, como eu costumo usar, criei um elemento pseudo após CSS para bloquear os elementos da interação do usuário e permitir o estilo sem precisar manipular toda a estrutura.

Por exemplo:

<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>

Eu posso colocar uma disabledaula no embrulhodiv

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

Isso deixaria o texto em cinza dentro do dive o tornaria inutilizável para o usuário.

Meu exemplo JSFiddle

Eu estou sempre usando:

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

e, em seguida, aplicando a classe css ao campo de entrada:

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

input [nome = nome de usuário] {desativado: true; /* Não funciona */ }

Eu sei que essa pergunta é bastante antiga, mas para outros usuários que se deparam com esse problema, suponho que a maneira mais fácil de desativar a entrada é simplesmente ': 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>

Na realidade, se você tiver algum script para desativar a entrada de forma dinâmica / automática com javascript ou jquery que seria desativado automaticamente com base na condição que você adicionar.

No jQuery, por exemplo:

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

Espero que a resposta em CSS ajude.

Receio que você não possa fazer isso, mas pode fazer o seguinte no jQuery, se não desejar adicionar os atributos aos campos. Coloque isso dentro da sua <head></head>tag

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

Se você estiver gerando os campos no DOM (com JS), faça isso:

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

Isso pode ser feito para uma finalidade não crítica, colocando uma sobreposição em cima do seu elemento de entrada. Aqui está o meu exemplo em HTML e CSS puro.

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>

Não há como usar CSS para esse fim. Meu conselho é incluir um código javascript no qual você atribui ou altera a classe css aplicada às entradas. Algo parecido :

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>

Uma variação da pointer-events: none;solução, que resolve o problema de a entrada ainda estar acessível por meio de controle rotulado ou tabindex, é agrupar a entrada em uma div, denominada como entrada de texto desabilitada, e definir input { visibility: hidden; }quando a entrada é "desabilitada" .
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>

O estilo desativado aplicado no snippet acima é retirado da interface do usuário do Chrome e pode não ser visualmente idêntico às entradas desativadas em outros navegadores. Possivelmente, ele pode ser personalizado para navegadores individuais usando os prefixos de extensão CSS específicos do mecanismo. Embora à primeira vista, acho que não poderia:
extensões CSS da Microsoft , extensões CSS da Mozilla , extensões CSS do WebKit

Parece muito mais sensato para introduzir um valor adicional visibility: disabledou display: disabledou talvez mesmo appearance: disabled, uma vez que visibility: hiddenjá afeta o comportamento dos elementos aplicáveis quaisquer elementos de controlo associadas.