Style de bouton désactivé avec CSS
Je suis en train de modifier le style d'un bouton avec une image incorporée comme on le voit dans la suite de Violon:
http://jsfiddle.net/krishnathota/xzBaZ/1/
Dans l'exemple il n'y a pas d'images, j'en ai peur.
Je suis en train de:
- Changer le
background-color
sur le bouton quand il est désactivé - Modifier l'image du bouton lorsqu'il est désactivé
- Désactiver le hover effet lorsqu'il est désactivé
- Lorsque vous cliquez sur l'image du bouton et faites-la glisser, l'image peut être vu séparément; je veux éviter que
- Le texte sur le bouton peut être sélectionné. Je veux éviter que, trop.
J'ai essayé de faire dans button[disabled]
. Mais certains effets pourraient ne pas être désactivé. comme
top: 1px; position: relative;
et de l'image.
Vous devez vous connecter pour publier un commentaire.
Pour les personnes handicapées des boutons, vous pouvez utiliser le
:disabled
pseudo-élément. Il fonctionne pour tous les éléments.Pour les navigateurs/dispositifs de soutien CSS2 seulement, vous pouvez utiliser le
[disabled]
sélecteur.Comme avec l'image, ne pas mettre une image dans le bouton. Utiliser les CSS
background-image
avecbackground-position
etbackground-repeat
. De cette façon, l'image en faisant glisser ne se produira pas.Sélection de problème: voici un lien à la question:
Exemple pour les personnes handicapées sélecteur:
CSS:
HTML:
:disabled
sélecteur est un sélecteur de CSS3. Lebackground-image
,background-repeat
,background-position
travaillent en CSS 2.:disabled
="true"
partie dedisabled="true"
n'est pas ce qu'il est désactivé. Vous pouvez utiliserdisabled="false"
oudisabled="cat"
et il serait encore désactivés. Ou tout simplementdisabled
avec aucune valeur. Cette propriété ne peut être présent/omis dans le code Html, ou ajoutés par le biais de JavaScript avec du vrai/fauxJe pense que vous devriez être en mesure de sélectionner un bouton désactivé à l'aide de l'suivantes:
Ajouter le code ci-dessous dans votre page. Faites-moi confiance, sans modifications apportées à des événements de bouton, pour désactiver/activer le bouton de simplement ajouter/supprimer le bouton de classe en Javascript.
Méthode 1
Méthode 2
À appliquer grise bouton CSS pour un bouton désactivé.
Par CSS:
Eux, vous pouvez ajouter de la décoration de ce bouton.
Pour changer de statut, vous pouvez utiliser jquery
Pour nous tous en utilisant bootstrap, vous pouvez changer le style en ajoutant le "handicapé" de la classe et en utilisant les éléments suivants:
HTML
CSS
Rappelez-vous que l'ajout de la "handicapés" de la classe n'est pas nécessairement désactiver le bouton, par exemple dans une soumettez le formulaire. Pour désactiver son comportement utiliser les handicapés de la propriété:
Un travail à jouer avec des exemples est disponible ici.
Lorsque votre bouton est désactivé directement définit l'opacité. Alors tout d'abord, nous devons définir son opacité comme
Et si vous changez de scss utilisation: