CSS: Supprimer les ombres sur désactivé boutons HTML

Lors de la désactivation des boutons HTML, une ombre est ajouté au texte du bouton. Je suis le style des boutons de moi-même et je voudrais n'avoir qu'une couleur (blanche) SANS l'ombre mais je ne sais pas comment le faire efficacement.

Ma méthode précédente a été de le laisser activé et re-style du bouton sensitif + états actifs et d'ignorer les cliquez vai Javascript. Vous l'a dit, n'est pas très efficace!

http://jsfiddle.net/gLfMX/

EDIT: image pour montrer l'ombre (en cours de visualisation dans IE9) + une version agrandie.

CSS: Supprimer les ombres sur désactivé boutons HTML

OriginalL'auteur Alex Guerin | 2012-01-07

  1. 9

    Vous avez déjà posté votre propre réponse, mais voici un peu plus d'infos.

    À partir de mes expériences, j'en suis arrivé à la même conclusion: sur IE, vous ne pouvez pas changer de CSS. Voici pourquoi.

    Les couleurs des handicapés boutons dépend de ce que Windows est configuré pour afficher pour les "Objets 3D" dans "Couleur et Apparence des fenêtres" (sous paramètres d'affichage).

    Les couleurs par défaut du les boutons sont les suivantes: texte = A0A0A0, ombre = blanc. Ils peuvent être différents si l'utilisateur a modifié les valeurs par défaut (dans Windows 7, vous devez aller dans "paramètres avancés" pour le faire), mais presque tout le monde aura ces. Ils ont été conçus pour s'adapter au système de couleur de fond par défaut d'un bouton désactivé, ce qui est F4F4F4.

    CSS: Supprimer les ombres sur désactivé boutons HTML

    Ma solution pour ce problème est la conception de l'CSS de sorte que, au moins pour les paramètres par défaut, sous IE un bouton désactivé va chercher OK - la meilleure approche est de définir l'arrière-plan lorsqu'il est désactivé pour F4F4F4:

    button[disabled], a[disabled] {
    background-color: #f4f4f4;
}

    Si vous utilisez Bootstrap comme moi, vous devriez faire ceci à la place:

    .btn[disabled], .btn.disabled[disabled] {
    background-color: #f4f4f4;
}

    Vous pouvez également ajouter un peu de conditionnel sélecteur pour activer ce seulement pour IE.

    OriginalL'auteur sinelaw

  2. 8

    ajouter border:none; à se débarrasser de l'ombre jsfiddle

    Merci mais je parle de l'ombre sur le texte à l'intérieur du bouton, de ne pas le bouton de la frontière.
    Je suis le seul à voir que les affectent de IE éventuellement jQuery et text-shadow:none; est une solution.
    Le problème est spécifique à IE 8 & 9 seulement. Note 9. Pas 10, pas 11.

    OriginalL'auteur danferth

  3. 4

    Après des heures de tripoter, je suis venu à la conclusion qu'il ne peut être fait avec IE.

    Depuis que j'ai la poignée de tous les clics sur le bouton à l'aide de jQuery, j'ai juste l'ignorer n'importe quel bouton qui a mon CSS sélectionné la propriété. Accordé, il n'est probablement pas la solution la plus élégante, mais il est cross-browser viewbale.

    Merci Nicole et danferth pour l'aider.

    OriginalL'auteur Alex Guerin

  4. 1

    Voici un exemple de comment faire pour supprimer l'ombrage sur le texte à l'intérieur du bouton.J'essayais de me débarrasser de mon ombrage sur mes boutons de menu.

    Après mon top des menus de style en CSS, j'ai regardé pour mon menu style.
    Si jamais vous voyez le "text-shadow" style tout d'abord, il n'en est votre problème.
    J'ai trouvé le mien ici:

    #menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:
    #77778b;font-family:'Oswald', Arial, sans-serif;text-shadow:none;}

    Mon texte de l'ombre a été fixé à #FFFFFF avec certains de positionnement appliquée.
    J'ai simplement enlevé ce style et bam, plus d'ombrage sur mes boutons.

    Juste de chercher l'endroit où "text-shadow" est d'abord appliquée dans votre menu CSS et de le configurer en mode "text-shadow:none"

    OriginalL'auteur jay

  5. 0

    Cela fonctionne aussi:

    input[disabled] {
   border: none;
}

    http://jsfiddle.net/gLfMX/2/

    De cette façon, vous pouvez cibler les personnes handicapées d'entrée sans s'inquiéter interférer avec les autres.

    Merci mais je parle de l'ombre sur le texte à l'intérieur du bouton, de ne pas le bouton de la frontière.
    hmmm, je ne suis pas en voir l'ombre du texte dans Firefox 9. Si vous constatez que l'un de vous pourrait essayer de le au-dessus du sélecteur avec text-shadow: none;
    Merci Nicole. J'ai édité le post pour montrer l'ombre. Le text-shadow sélecteur ne semble pas faire une différence...
    IE ne reconnaît pas de text-shadow. Je n'ai pas IE portée de main pour vérifier, mais d'après msdn.microsoft.com/en-us/library/ms533732%28v=vs.85%29.aspx il "s'estompe" désactivé les entrées et les boutons. Vous pouvez essayer de déclarer color: #fff; car IE n'est pas en fait l'observation.

    OriginalL'auteur Nicole McCoy