Supprimer le style complet d'un bouton HTML/submit

Question

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 lorsque je clique sur le bouton, il se déplace légèrement vers le haut, ce qui lui donne un aspect déformé. Est-ce qu'il y a un état de clic css, ou mousedown ? Je ne sais pas ce qui déclenche cet état.

Je sais que ce n'est pas grand-chose, mais parfois ce sont les petites choses qui comptent.

Answer 1

Je pense qu'il s'agit d'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>

Answer 2

Votre question indique "Internet Explorer", mais pour ceux qui s'intéressent à d'autres navigateurs, vous pouvez désormais utiliser all: unset sur les boutons pour les déstructurer.

Il ne fonctionne pas dans IE, mais il est bien supporté partout ailleurs.

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

Avertissement sur l'accessibilité : Pour les utilisateurs qui ne se servent pas d'un pointeur de souris, veillez à ajouter à nouveau quelques :focus le stylisme, par exemple button:focus { outline: orange auto 5px } para accessibilité du clavier .

Et n'oubliez pas cursor: pointer . all: unset supprime todos le stylisme, y compris le cursor: pointer qui fait ressembler le curseur de la souris à une main lorsque vous survolez le bouton. Il est presque certain que vous voudrez rétablir cette fonction.

button {
  all: unset;
  cursor: pointer;
}

button:focus {
  outline: orange 5px auto;
}

<button>check it out</button>

Answer 3

Je suppose que lorsque vous dites ' cliquez sur le bouton, il se déplace légèrement vers le haut Vous parlez de l'état de clic de la souris vers le bas 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 constaté qu'il n'était pas possible d'arrêter, d'outrepasser ou de désactiver cette action native d'IE, ce qui m'a amené à modifier quelque peu mon balisage pour permettre ce mouvement sans affecter l'aspect général du bouton pour les différents états.

Il s'agit de ma version finale :

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

Answer 4

Essayez de supprimer la bordure de votre bouton :

input, button, submit
{
  border:none;
}

Answer 5

Avec bootstrap 4, c'est plus facile. Vous pouvez utiliser les classes : bg-transparent y border-0