web-dev-qa-db-fra.com

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

Est-il possible de désactiver les champs de formulaire à l'aide de 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 pose cette question est qu’il existe une application dans laquelle les champs de formulaire sont générés automatiquement et masqués/affichés en fonction de certaines règles (qui s’exécutent en Javascript). Maintenant, je souhaite l'étendre pour prendre en charge la désactivation/l'activation des champs, mais la manière dont les règles sont écrites permet de 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, d'une manière ou d'une autre, cela semble moins qu'idéal.

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

htmlcss
144
Anupam Jain

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

pointer-events:none;

Vous voudrez peut-être aussi changer de couleur, etc.

143
ANaimi

Puisque les règles fonctionnent en JavaScript, pourquoi ne pas les désactiver en utilisant javascript (ou dans mon exemple, jQuery)?

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

UPDATE

La fonction attr n’est plus la principale approche, comme il a été souligné dans les commentaires ci-dessous. Ceci est maintenant fait avec la fonction prop.

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

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 de tabulation, 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>
70
Fereydoon Barikzehy

Il est très curieux que vous ayez des propriétés visibles et d'affichage en CSS, mais pas d'activer/de désactiver.

C'est très curieux que vous pensiez que c'est très curieux. Vous ne comprenez pas le but de CSS. CSS n'a pas pour vocation de modifier le comportement des éléments de formulaire. Il est destiné à changer leur style uniquement. Le fait de masquer un champ de texte ne signifie pas que celui-ci n'existe plus ou que le navigateur n'enverra pas ses données lorsque vous soumettez le formulaire. Tout ce qu'il fait est de le cacher aux yeux de l'utilisateur.

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

53
BoltClock

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

disabled="disabled"
19
mr_eclair

La solution pratique consiste à utiliser CSS pour masquer l’entrée.

Pour en arriver à 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 code CSS afin de le montrer et de le masquer.

17
graphicdivine

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

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

Pour une structure composite, comme je l’utilise habituellement, j’ai créé un pseudo élément css afin de bloquer les éléments de l’interaction de l’utilisateur et d’autoriser 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 classe disabled sur l'emballage div

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

Cela aurait pour effet de rendre le texte gris dans la variable div et de le rendre inutilisable pour l'utilisateur.

Mon exemple JSFiddle

10
Larchy

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" />
5
Kai Noack

input [nom = nom d'utilisateur] {disabled: true; /* 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 la saisie est tout 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 de manière dynamique/automatique avec JavaScript ou jQuery, cette option sera automatiquement désactivée en fonction de la condition que vous avez ajoutée.

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

3
Shaze

Vous ne pouvez pas le faire, j'en ai bien peur, mais vous pouvez effectuer les opérations suivantes dans jQuery si vous ne souhaitez pas ajouter les attributs aux champs. Il suffit de placer ceci dans votre balise <head></head>

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

Si vous générez les champs dans le DOM (avec JS), procédez comme suit:

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

Cela peut être fait à des fins non critiques en plaçant une superposition au-dessus de votre élément d'entrée. Voici mon exemple en HTML pur 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>
1
DeFeNdog

Il n'y a aucun moyen d'utiliser CSS à cette fin. Mon conseil est d'inclure un code javascript dans lequel vous affectez 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>
1
Joel Barba