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

Vous pouvez simuler l'effet de désactivation à l'aide de CSS.

pointer-events:none;

Vous pourriez également vouloir changer les couleurs, etc.

Answer 2

Cela peut être utile :

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

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

Mise à jour :

et si vous voulez 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>

Answer 3

Puisque les règles s'exécutent en JavaScript, pourquoi ne pas les désactiver à l'aide de javascript (ou dans le cas de mes exemples, jQuery) ?

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

UPDATE

El attr n'est plus la principale approche en la matière, comme cela a été souligné dans les commentaires ci-dessous. Cela se fait maintenant avec la fonction prop fonction.

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

Answer 4

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.

Vous comprenez mal l'objectif des CSS. CSS n'est pas destiné à changer le comportement d'éléments de formulaire. Il s'agit de modifier leur style seulement. Masquer un champ de texte ne signifie pas que le champ de texte n'existe plus ou que le navigateur n'enverra pas ses données lorsque vous soumettrez le formulaire. Il s'agit simplement de le cacher aux yeux de l'utilisateur.

Pour désactiver réellement vos champs, vous devez doit utiliser le disabled en HTML ou l'attribut disabled Propriété DOM en JavaScript.

Answer 5

Vous ne pouvez pas utiliser le CSS pour désactiver la Textbox. La solution serait un attribut HTML.

disabled="disabled"