Entfernen Sie das vollständige Design einer HTML-Schaltfläche / Senden

Gibt es eine Möglichkeit, das Styling einer Schaltfläche in Internet Explorer vollständig zu entfernen? Ich benutze ein CSS-Sprite für meinen Button und alles sieht in Ordnung aus.

Aber wenn ich auf die Schaltfläche klicke, bewegt sie sich ein wenig nach oben, sodass sie nicht mehr in Form ist. Gibt es einen CSS-Klickstatus oder einen Mousedown? Ich weiß nicht, was diesen Zustand auslöst.

Ich weiß, dass es keine wirklich große Sache ist, aber manchmal sind es die kleinen Dinge, die wichtig sind.

Ich gehe davon aus, dass Sie, wenn Sie " Klicken Sie auf die Schaltfläche, sie bewegt sich ein wenig nach oben" sagen, über den Mausklickstatus für die Schaltfläche sprechen und dass sie beim Loslassen des Mausklicks in den normalen Zustand zurückkehrt ? Und dass Sie das Standard-Rendering der Schaltfläche deaktivieren, indem Sie Folgendes verwenden:

input, button, submit { border:none; } 

Wenn ja..

Persönlich habe ich festgestellt, dass Sie diese native IE-Aktion nicht stoppen / überschreiben / deaktivieren können. Dies hat mich dazu veranlasst, mein Markup ein wenig zu ändern, um diese Bewegung zu berücksichtigen und das allgemeine Erscheinungsbild der Schaltfläche für die verschiedenen Status nicht zu beeinträchtigen.

Dies ist mein letzter Aufschlag:

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

Ich denke, dies bietet einen gründlicheren Ansatz:

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

<button>Example</button>

Ihre Frage lautet "Internet Explorer", aber für diejenigen, die an anderen Browsern interessiert sind, können Sie diese jetzt verwenden all: unset Schaltflächen verwenden, um sie zu entfernen.

Es funktioniert nicht in IE oder Edge 18, wird aber überall gut unterstützt.

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

Safari-Farbwarnung: Das Festlegen des Textes colorder Schaltfläche nach der Verwendung all: unsetkann in Safari 13.1 aufgrund eines Fehlers in WebKit fehlschlagen . (Der Fehler wird in Safari 14 und höher behoben.) "all: unset Setzt -webkit-text-fill-colorauf schwarz, und die Überschreibung Farbe.“ Wenn Sie colornach der Verwendung Text einstellen müssen, müssen Sie all: unsetsowohl die colorals auch -webkit-text-fill-colordie gleiche Farbe festlegen .

Barrierefreiheitswarnung: Um Benutzern zu helfen, die keinen Mauszeiger verwenden, müssen Sie einige :focusStile erneut hinzufügen , z. B. button:focus { outline: orange auto 5px }für die Barrierefreiheit der Tastatur . .

Und vergiss nicht cursor: pointer. all: unsetEntfernt jegliches Styling, einschließlich des cursor: pointer, wodurch Ihr Mauszeiger wie eine zeigende Hand aussieht, wenn Sie mit der Maus über die Schaltfläche fahren. Das wollen Sie mit ziemlicher Sicherheit zurückbringen.

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

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

<button>check it out</button>

Versuchen Sie, den Rand von Ihrer Schaltfläche zu entfernen:

input, button, submit
{
  border:none;
}

In Bootstrap 4 ist am einfachsten. Sie können die Klassen verwenden: bg-transparentundborder-0

Ich denke, es ist der Status "aktiv" der Schaltfläche.