Supprimer le style complet d'un bouton HTML / soumettre

94

Existe-t-il un moyen de supprimer complètement le style d'un bouton dans Internet Explorer? J'utilise un sprite css pour mon bouton, et tout semble correct.

Mais quand je clique sur le bouton, il se déplace un peu vers le haut, cela le fait paraître déformé. Y a-t-il un état de clic CSS ou mousedown? Je ne sais pas ce qui déclenche cet état.

Je sais que ce n'est pas vraiment un gros problème, mais parfois ce sont les petites choses qui comptent.

Saif Bechan
la source

Réponses:

71

Je suppose que lorsque vous dites `` cliquez sur le bouton, il se déplace un peu vers le haut '', vous parlez de l'état de clic de la souris pour le bouton, et que lorsque vous relâchez le clic de la souris, il revient à son état normal ? Et que vous désactivez le rendu par défaut du bouton en utilisant:

input, button, submit { border:none; } 

Si c'est le cas..

Personnellement, j'ai trouvé que vous ne pouvez pas réellement arrêter / remplacer / désactiver cette action native IE, ce qui m'a amené à modifier un peu mon balisage pour permettre ce mouvement et ne pas affecter l'aspect général du bouton pour les différents états.

Voici ma dernière majoration:

<span class="your-button-class">
    <span>
        <input type="Submit" value="View Person">
    </span>
</span>

un darren
la source
131

Je pense que cela fournit une approche plus approfondie:

button, input[type="submit"], input[type="reset"] {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}
<button>Example</button>

Kevin Leary
la source
2
Je ne pense pas que le fond ait un «aucun» - et le! Important n'est pas bon.
sheriffderek
4
En général, lorsque vous faites cela, vous souhaitez remplacer les styles existants qui existent pour un bouton. Il est rare que vous souhaitiez le faire avec du HTML propre et sans style, d'où l'utilisation de !important. Cela dit, je l'ai supprimé car c'est une décision de situation. background: noneest entièrement valide: stackoverflow.com/questions/20784292/…
Kevin Leary
A chacun son point de vue! Important. Je ne pense pas que je pourrais travailler sur un projet où j'ai été obligé de l'utiliser. RE: 'aucun' Voici une référence qui vaut mieux qu'un article SO. Lorsque vous utilisez «arrière-plan» seul, vous utilisez vraiment la sténographie et écrasez tous les attributs.
sheriffderek
Je me rendais fou de la différence entre le style d'une image et du texte à l'intérieur d'un bouton et le fait de lui donner le même aspect qu'à l'extérieur d'un <button/>... dans mon cas, a font: inherit;fait l'affaire. Je vous remercie!
Kate
3
Je pense que pour des raisons d'accessibilité, vous voudrez probablement laisser ce schéma là. sinon, lorsque vous passez dessus, il n'y a pas de repère visuel où vous vous trouvez. bonne réponse cependant!
John Hooper
43

Votre question dit «Internet Explorer», mais pour ceux qui s'intéressent aux autres navigateurs, vous pouvez désormais utiliser des all: unsetboutons pour les désélectionner.

Cela ne fonctionne pas dans IE ou Edge 18, mais il est bien pris en charge partout ailleurs.

https://caniuse.com/#feat=css-all

Avertissement de couleur Safari: la définition du texte colordu bouton après utilisation all: unsetpeut échouer dans Safari 13.1, en raison d' un bogue dans WebKit . (Le bogue sera corrigé dans Safari 14 et les versions ultérieures.) " all: unsetEst défini -webkit-text-fill-colorsur noir, et cela remplace la couleur." Si vous devez définir du texte coloraprès utilisation all: unset, veillez à définir à la fois le coloret le -webkit-text-fill-colorsur la même couleur.

Avertissement d'accessibilité: pour le bien des utilisateurs qui n'utilisent pas de pointeur de souris, assurez-vous de rajouter du :focusstyle, par exemple button:focus { outline: orange auto 5px }pour l' accessibilité du clavier .

Et n'oubliez pas cursor: pointer. all: unsetsupprime tous les styles, y compris le cursor: pointer, qui donne au curseur de la souris l'aspect d'une main pointée lorsque vous survolez le bouton. Vous voulez certainement ramener cela.

button {
  all: unset;
  color: blue;
  -webkit-text-fill-color: blue;
  cursor: pointer;
}

button:focus {
  outline: orange 5px auto;
}
<button>check it out</button>

Dan Fabulich
la source
1
Merci pour ça!
Will Ediger
Ceci n'est pas conseillé pour des raisons d'accessibilité. Vous devrez par exemple rajouter tous les outlinestyles pour l' :focusétat de l' élément.
Devin
@Devin Excellent point! J'ai mis à jour mon message avec une suggestion de rajouter un outlinestyle. (Mais je ne pense pas qu'il y ait autre chose que nous devons rajouter à toutes fins. Savez-vous de quelque chose?)
Dan Fabulich
8

Essayez de supprimer la bordure de votre bouton:

input, button, submit
{
  border:none;
}
Sarfraz
la source
4

Dans bootstrap 4, c'est le plus simple. Vous pouvez utiliser les classes: bg-transparentetborder-0

ValRob
la source
+ shadow-nonepour moi et c'est suffisant. THX!
Bachet
0

Je pense que c'est l'état du bouton "actif".

Midhat
la source
Cela doit être l'état actif, vous avez raison +1 pour cela. Mais je ne l'ai pas fait fonctionner correctement
Saif Bechan
"Je pense" n'est pas une réponse.
shinzou