Comment désactiver les champs de formulaire en utilisant CSS?

Est-il possible de désactiver les champs de formulaire en utilisant CSS? Je connais bien sûr l'attribut désactivé, mais est-il possible de le spécifier dans une règle CSS? Quelque chose comme -

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

La raison pour laquelle je demande est que j'ai une application où les champs du formulaire sont générés automatiquement et les champs sont masqués / affichés en fonction de certaines règles (qui s'exécutent en Javascript). Maintenant, je veux l'étendre pour prendre en charge la désactivation / l'activation des champs, mais la façon dont les règles sont écrites pour manipuler directement les propriétés de style des champs de formulaire. Alors maintenant, je dois étendre le moteur de règles pour modifier les attributs ainsi que le style des champs de formulaire et cela semble loin d'être idéal.

Il est très curieux que vous ayez des propriétés visibles et d'affichage dans CSS mais pas d'activation / désactivation. Y a-t-il quelque chose de similaire dans le standard HTML5 encore sous-fonctionnel, ou même quelque chose de non standard (spécifique au navigateur)?

Cela peut être utile:

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

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

Mettre à jour:

et si vous souhaitez désactiver l'index des onglets, vous pouvez l'utiliser de cette façon:

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

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

Vous pouvez simuler l'effet désactivé en utilisant CSS.

pointer-events:none;

Vous pouvez également changer les couleurs, etc.

Puisque les règles s'exécutent en JavaScript, pourquoi ne pas les désactiver en utilisant javascript (ou dans mon cas d'exemples, jQuery)?

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

METTRE À JOUR

La attrfonction n'est plus l'approche principale à cet égard, comme cela a été souligné dans les commentaires ci-dessous. Ceci est maintenant fait avec la propfonction.

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

Il est très curieux que vous ayez des propriétés visibles et d'affichage dans CSS mais pas d'activation / désactivation.

C'est très curieux que vous trouviez cela très curieux. Vous ne comprenez pas le but du CSS. CSS n'est pas destiné à modifier le comportement des éléments de formulaire. Il est destiné à changer leur style uniquement. Masquer un champ de texte ne signifie pas que le champ de texte n'est plus là ou que le navigateur n'enverra pas ses données lorsque vous soumettez le formulaire. Tout ce qu'il fait, c'est le cacher aux yeux de l'utilisateur.

Pour désactiver réellement vos champs, vous devez utiliser l' disabledattribut en HTML ou la disabledpropriété DOM en JavaScript.

Vous ne pouvez pas utiliser CSS pour désactiver Textbox. la solution serait l'attribut HTML.

disabled="disabled"

La solution pratique consiste à utiliser CSS pour masquer réellement l'entrée.

Pour amener cela à sa conclusion naturelle, vous pouvez écrire deux entrées html pour chaque entrée réelle (une activée et une désactivée), puis utiliser javascript pour contrôler le CSS pour les afficher et les masquer.

première réponse à quelque chose, et apparemment juste un peu tard ...

J'accepte de le faire en javascript, si vous l'utilisez déjà.

Pour une structure composite, comme j'utilise habituellement, j'ai créé un pseudo après élément css pour bloquer les éléments de l'interaction de l'utilisateur et permettre le style sans avoir à manipuler toute la structure.

Par exemple:

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

Je peux placer une disabledclasse sur l'emballagediv

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

Cela griserait le texte dans le divet le rendrait inutilisable pour l'utilisateur.

Mon exemple JSFiddle

J'utilise toujours:

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

puis en appliquant la classe css au champ de saisie:

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

entrée [nom = nom d'utilisateur] {désactivé: vrai; /* Ne marche pas */ }

Je sais que cette question est assez ancienne, mais pour les autres utilisateurs qui rencontrent ce problème, je suppose que le moyen le plus simple de désactiver l'entrée est simplement de ": 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 réalité, si vous avez un script pour désactiver l'entrée dynamiquement / automatiquement avec javascript ou jquery, cela désactiverait automatiquement en fonction de la condition que vous ajoutez.

Dans jQuery par exemple:

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

J'espère que la réponse en CSS vous aidera.

Vous ne pouvez pas faire cela, j'en ai peur, mais vous pouvez faire ce qui suit dans jQuery, si vous ne voulez pas ajouter les attributs aux champs. Placez-le simplement dans votre <head></head>étiquette

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

Si vous générez les champs dans le DOM (avec JS), vous devez le faire à la place:

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

Cela peut être fait dans un but non critique en plaçant une superposition au-dessus de votre élément d'entrée. Voici mon exemple en HTML et CSS pur.

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>

Il n'y a aucun moyen d'utiliser CSS à cette fin. Mon conseil est d'inclure un code javascript où vous attribuez ou modifiez la classe css appliquée aux entrées. Quelque chose comme ca :

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>

Une variante de la pointer-events: none;solution, qui résout le problème de l'entrée toujours accessible via son étiquetage control ou tabindex, consiste à envelopper l'entrée dans un div, qui est stylé comme une entrée de texte désactivée, et à définir input { visibility: hidden; }lorsque l'entrée est "désactivée" .
Réf: 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>

Le style désactivé appliqué dans l'extrait de code ci-dessus provient de l'interface utilisateur de Chrome et peut ne pas être visuellement identique aux entrées désactivées sur d'autres navigateurs. Il peut éventuellement être personnalisé pour des navigateurs individuels en utilisant des préfixes d'extension CSS spécifiques au moteur. Bien un coup d' oeil, je ne pense pas qu'il pourrait: les
extensions Microsoft CSS , extensions Mozilla CSS , extensions WebKit CSS

Il semble beaucoup plus judicieux d'introduire une valeur supplémentaire visibility: disabledou display: disabledpeut - être même appearance: disabled, étant donné que visibility: hiddenaffecte déjà le comportement des éléments applicables des éléments de contrôle associés.