Come disabilitare i campi modulo tramite CSS?

È possibile disabilitare i campi modulo tramite CSS? Naturalmente conosco l'attributo disabilitato, ma è possibile specificarlo in una regola CSS? Qualcosa di simile a -

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

Il motivo per cui lo sto chiedendo è che ho un'applicazione in cui i campi del modulo sono generati automaticamente e i campi sono nascosti / mostrati in base ad alcune regole (che vengono eseguite in Javascript). Ora voglio estenderlo per supportare i campi di disabilitazione / abilitazione, ma il modo in cui le regole sono scritte per manipolare direttamente le proprietà di stile dei campi del modulo. Quindi ora devo estendere il motore delle regole per modificare gli attributi e lo stile dei campi del modulo e in qualche modo sembra meno che ideale.

È molto curioso che tu abbia proprietà visibili e visualizzate nei CSS ma non le abiliti / disabiliti. C'è qualcosa di simile nello standard HTML5 ancora non funzionante o anche qualcosa di non standard (specifico del browser)?

Questo può essere utile:

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

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

Aggiornare:

e se vuoi disabilitare dall'indice di tabulazione puoi usarlo in questo modo:

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

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

Puoi falsificare l'effetto disabilitato usando CSS.

pointer-events:none;

Potresti anche voler cambiare i colori ecc.

Dato che le regole sono in esecuzione in JavaScript, perché non disabilitarle usando javascript (o nel mio esempio, jQuery)?

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

AGGIORNARE

La attrfunzione non è più l'approccio principale a questo, come è stato sottolineato nei commenti qui sotto. Questo è ora fatto con la propfunzione.

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

È molto curioso che tu abbia proprietà visibili e visualizzate nei CSS ma non le abiliti / disabiliti.

È molto curioso che tu pensi che sia molto curioso. Stai fraintendendo lo scopo del CSS. CSS non intende modificare il comportamento degli elementi del modulo. Ha lo scopo di cambiare il loro stile solo il . Nascondere un campo di testo non significa che il campo di testo non è più presente o che il browser non invierà i suoi dati quando invii il modulo. Tutto ciò che fa è nasconderlo agli occhi dell'utente.

Per disabilitare effettivamente i campi, è necessario utilizzare l' disabledattributo in HTML o la disabledproprietà DOM in JavaScript.

Non è possibile utilizzare CSS per disabilitare Textbox. la soluzione sarebbe l'attributo HTML.

disabled="disabled"

La soluzione pratica è utilizzare i CSS per nascondere effettivamente l'input.

Per portarlo alla sua naturale conclusione, puoi scrivere due input html per ciascun input effettivo (uno abilitato e uno disabilitato) e quindi utilizzare JavaScript per controllare il CSS per mostrarli e nasconderli.

prima volta a rispondere a qualcosa, e apparentemente solo un po 'in ritardo ...

Accetto di farlo tramite JavaScript, se lo stai già utilizzando.

Per una struttura composita, come di solito uso, ho creato un elemento cse pseudo dopo per bloccare gli elementi dall'interazione dell'utente e consentire lo stile senza dover manipolare l'intera struttura.

Per esempio:

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

Posso mettere una disabledclasse sulla confezionediv

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

Questo renderebbe grigio il testo all'interno di dive lo renderebbe inutilizzabile per l'utente.

Il mio esempio JSFiddle

Uso sempre:

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

e quindi applicare la classe css al campo di input:

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

input [nome = nome utente] {disabilitato: vero; /* Non funziona */ }

So che questa domanda è piuttosto vecchia ma per gli altri utenti che riscontrano questo problema, suppongo che il modo più semplice per disabilitare l'input sia semplicemente ": 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>

In realtà, se hai qualche script per disabilitare l'input in modo dinamico / automatico con javascript o jquery che si disabiliterebbe automaticamente in base alla condizione che aggiungi.

In jQuery per esempio:

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

Spero che la risposta nei CSS sia di aiuto.

Temo che non puoi farlo, ma puoi fare quanto segue in jQuery, se non vuoi aggiungere gli attributi ai campi. Inseriscilo nel <head></head>tag

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

Se stai generando i campi nel DOM (con JS), dovresti invece farlo:

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

Questo può essere fatto per uno scopo non critico mettendo un overlay sopra l'elemento di input. Ecco il mio esempio in puro HTML e 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>

Non c'è modo di usare i CSS per questo scopo. Il mio consiglio è di includere un codice javascript in cui si assegna o si modifica la classe css applicata agli input. Qualcosa del genere :

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 variante alla pointer-events: none;soluzione, che risolve il problema dell'input ancora accessibile tramite il suo controllo etichettato o tabindex, è di avvolgere l'input in un div, che è definito come input di testo disabilitato, e l'impostazione input { visibility: hidden; }quando l'input è "disabilitato" .
Rif: 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>

Lo stile disabilitato applicato nello snippet sopra è tratto dall'interfaccia utente di Chrome e potrebbe non essere visivamente identico agli input disabilitati su altri browser. Forse può essere personalizzato per i singoli browser usando prefissi di estensione CSS specifici del motore. Anche se a prima vista, non penso che potrebbe:
estensioni CSS Microsoft , estensioni CSS Mozilla , estensioni CSS WebKit

Sembrerebbe molto più ragionevole introdurre un valore aggiunto visibility: disabledo display: disabledo forse anche appearance: disabled, dato che visibility: hiddengià colpisce il comportamento degli elementi applicabili eventuali elementi di controllo associati.