Wie deaktiviere ich Formularfelder mit CSS?

Ist es möglich, Formularfelder mit CSS zu deaktivieren? Ich weiß natürlich, dass das Attribut deaktiviert ist, aber ist es möglich, dies in einer CSS-Regel anzugeben? Etwas wie -

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

Der Grund, den ich frage, ist, dass ich eine Anwendung habe, in der die Formularfelder automatisch generiert werden und Felder basierend auf einigen Regeln (die in Javascript ausgeführt werden) ausgeblendet / angezeigt werden. Jetzt möchte ich es erweitern, um das Deaktivieren / Aktivieren von Feldern zu unterstützen, aber die Art und Weise, wie die Regeln geschrieben werden, um die Stileigenschaften der Formularfelder direkt zu bearbeiten. Jetzt muss ich die Regel-Engine erweitern, um Attribute sowie den Stil von Formularfeldern zu ändern, und irgendwie scheint es nicht ideal zu sein.

Es ist sehr merkwürdig, dass Sie sichtbare und angezeigte Eigenschaften in CSS haben, diese jedoch nicht aktivieren / deaktivieren. Gibt es so etwas im noch in Arbeit befindlichen HTML5-Standard oder sogar etwas Nicht-Standard (browserspezifisch)?

Dies kann hilfreich sein:

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

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

Aktualisieren:

Wenn Sie den Registerkartenindex deaktivieren möchten, können Sie ihn folgendermaßen verwenden:

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

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

Sie können den deaktivierten Effekt mithilfe von CSS vortäuschen.

pointer-events:none;

Möglicherweise möchten Sie auch Farben usw. ändern.

Da die Regeln in JavaScript ausgeführt werden, können Sie sie mit Javascript (oder in meinem Beispiel mit jQuery) deaktivieren.

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

AKTUALISIEREN

Die attrFunktion ist nicht mehr der primäre Ansatz dafür, wie in den Kommentaren unten ausgeführt wurde. Dies geschieht nun mit der propFunktion.

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

Es ist sehr merkwürdig, dass Sie sichtbare und angezeigte Eigenschaften in CSS haben, diese jedoch nicht aktivieren / deaktivieren.

Es ist sehr neugierig, dass Sie denken, dass das sehr neugierig ist. Sie verstehen den Zweck von CSS falsch. CSS soll das Verhalten von Formularelementen nicht ändern . Es soll nur ihren Stil ändern . Das Ausblenden eines Textfelds bedeutet nicht, dass das Textfeld nicht mehr vorhanden ist oder dass der Browser seine Daten nicht sendet, wenn Sie das Formular senden. Alles was es tut, ist es vor den Augen des Benutzers zu verbergen.

Um Ihre Felder tatsächlich zu deaktivieren, müssen Sie das disabledAttribut in HTML oder die disabledDOM-Eigenschaft in JavaScript verwenden.

Sie können CSS nicht zum Deaktivieren von Textbox verwenden. Lösung wäre HTML-Attribut.

disabled="disabled"

Die praktische Lösung besteht darin, CSS zu verwenden, um die Eingabe tatsächlich auszublenden.

Um dies zu seiner natürlichen Schlussfolgerung zu bringen, können Sie zwei HTML-Eingaben für jede tatsächliche Eingabe schreiben (eine aktiviert und eine deaktiviert) und dann mithilfe von Javascript das CSS steuern, um sie anzuzeigen und auszublenden.

das erste Mal etwas zu beantworten und scheinbar nur ein bisschen spät ...

Ich bin damit einverstanden, dies mit Javascript zu tun, wenn Sie es bereits verwenden.

Für eine zusammengesetzte Struktur, wie ich sie normalerweise verwende, habe ich ein CSS-Pseudo-After-Element erstellt, um die Elemente für die Benutzerinteraktion zu blockieren und das Styling zu ermöglichen, ohne die gesamte Struktur bearbeiten zu müssen.

Beispielsweise:

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

Ich kann eine disabledKlasse auf die Verpackung legendiv

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

Dies würde den Text in grau divmachen und ihn für den Benutzer unbrauchbar machen.

Mein Beispiel JSFiddle

Ich benutze immer:

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

und dann Anwenden der CSS-Klasse auf das Eingabefeld:

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

Eingabe [Name = Benutzername] {deaktiviert: wahr; /* Funktioniert nicht */ }

Ich weiß, dass diese Frage ziemlich alt ist, aber für andere Benutzer, die auf dieses Problem stoßen, ist der einfachste Weg, die Eingabe zu deaktivieren, einfach ': 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 der Realität, wenn Sie ein Skript haben, um die Eingabe dynamisch / automatisch mit Javascript oder JQuery zu deaktivieren, das automatisch basierend auf der von Ihnen hinzugefügten Bedingung deaktiviert wird.

In jQuery zum Beispiel:

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

Hoffe die Antwort in CSS hilft.

Sie können das leider nicht tun, aber Sie können in jQuery Folgendes tun, wenn Sie die Attribute nicht zu den Feldern hinzufügen möchten. Platzieren Sie dies einfach in Ihrem <head></head>Tag

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

Wenn Sie die Felder im DOM (mit JS) generieren, sollten Sie stattdessen Folgendes tun:

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

Dies kann für einen unkritischen Zweck erfolgen, indem Sie ein Overlay über Ihr Eingabeelement legen. Hier ist mein Beispiel in reinem HTML und 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>

Es gibt keine Möglichkeit, CSS für diesen Zweck zu verwenden. Mein Rat ist, einen Javascript-Code einzufügen, in dem Sie die CSS-Klasse zuweisen oder ändern, die auf die Eingaben angewendet wird. Sowas in der Art :

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>

Eine Variation der pointer-events: none;Lösung, die das Problem behebt, dass die Eingabe weiterhin über die Bezeichnung control oder tabindex zugänglich ist, besteht darin, die Eingabe in ein div zu verpacken, das als deaktivierte Texteingabe gestaltet ist, und festzulegen, input { visibility: hidden; }wann die Eingabe "deaktiviert" ist. .
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>

Das im obigen Snippet angewendete deaktivierte Styling stammt aus der Chrome-Benutzeroberfläche und ist möglicherweise visuell nicht mit deaktivierten Eingaben in anderen Browsern identisch. Möglicherweise kann es mit motorspezifischen CSS-Erweiterungspräfixen für einzelne Browser angepasst werden. Auf einen Blick glaube ich nicht, dass dies möglich ist:
Microsoft CSS-Erweiterungen , Mozilla CSS-Erweiterungen , WebKit CSS-Erweiterungen

Es wäre viel mehr sinnvoll erscheint , einen zusätzlichen Wert einzuführen visibility: disabledoder display: disabledvielleicht sogar appearance: disabled, da visibility: hiddenbereits das wirkt sich das Verhalten der anwendbaren Elemente alle zugehörigen Steuerelemente.