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

Cela peut être fait dans un but non critique en plaçant une surcouche au-dessus de votre élément d'entrée. Voici mon exemple en pur HTML et 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>

Answer 2

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

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>

Answer 3

Une variante de la pointer-events: none; La solution, qui résout le problème de l'accès à l'entrée par le biais de son contrôle étiqueté ou de son tabindex, consiste à envelopper l'entrée dans un div, qui est stylisé comme une entrée de texte désactivée, et à définir le paramètre 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 ci-dessus est tiré de l'interface utilisateur de Chrome et peut ne pas être visuellement identique aux entrées désactivées sur d'autres navigateurs. Il est possible de le personnaliser pour chaque navigateur en utilisant des préfixes d'extension CSS spécifiques au moteur. Mais à première vue, je ne pense pas que ce soit possible :
Extensions CSS de Microsoft , Extensions CSS de Mozilla , Extensions CSS de WebKit

Il semblerait beaucoup plus judicieux d'introduire une valeur supplémentaire visibility: disabled o display: disabled ou peut-être même appearance: disabled étant donné que visibility: hidden affecte déjà le comportement des éléments applicables tout élément de contrôle associé.