Comment désactiver les champs de formulaire à l'aide de CSS ?

Question

Est-il possible de désactiver les champs de formulaire à l'aide de CSS ? Je connais bien sûr l'attribut disabled, 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 de ma question est que j'ai une application où les champs du formulaire sont générés automatiquement et où les champs sont cachés/affichés en fonction de certaines règles (qui sont exécutées en Javascript). Maintenant je veux l'étendre pour supporter la désactivation/activation des champs, mais la façon dont les règles sont écrites pour manipuler directement les propriétés de style des champs du formulaire. Je dois donc maintenant étendre le moteur de règles pour modifier les attributs ainsi que le style des champs de formulaire, ce qui semble loin d'être idéal.

Il est très curieux que vous disposiez des propriétés visible et display en CSS mais pas des propriétés enable/disable. Y a-t-il quelque chose de semblable dans la norme HTML5, toujours en cours d'élaboration, ou même quelque chose de non standard (spécifique au navigateur) ?

Answer 1

La solution pratique consiste à utiliser les feuilles de style en cascade (CSS) pour masquer réellement l'entrée.

Pour aller jusqu'au bout de la démarche, vous pouvez écrire deux entrées html pour chaque entrée réelle (une activée et une désactivée), puis utiliser le javascript pour contrôler le CSS afin de les afficher et de les masquer.

Answer 2

C'est la première fois que je réponds à quelque chose, et il semble que ce soit un peu tard...

Je suis d'accord pour le faire par javascript, si vous l'utilisez déjà.

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

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 un disabled sur l'emballage div

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

Le texte en gris dans le champ div et le rendre inutilisable pour l'utilisateur.

Mon exemple JSFiddle

Answer 3

Je suis toujours en train d'utiliser :

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

et ensuite appliquer la classe css au champ de saisie :

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

Answer 4

input[name=username] { disabled : true ; /* Ne fonctionne pas */ }

Je sais que cette question est assez ancienne mais pour les autres utilisateurs qui rencontrent ce problème, je suppose que la façon la plus simple de désactiver l'entrée est simplement par ':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 qui 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.

Answer 5

J'ai bien peur que ce ne soit pas possible, mais vous pouvez faire ce qui suit en jQuery, si vous ne voulez pas ajouter les attributs aux champs. Placez simplement ceci à l'intérieur de 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 devriez plutôt faire ceci :

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