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

92

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.

Saif Bechan
quelle

Antworten:

70

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>

ein darren
quelle
126

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>

Kevin Leary
quelle
2
Ich glaube nicht, dass der Hintergrund ein "Keine" hat - und das! Wichtig ist nicht gut.
Sheriffderek
4
Wenn Sie dies tun, möchten Sie normalerweise vorhandene Stile überschreiben, die für eine Schaltfläche vorhanden sind. Es ist selten, dass Sie dies mit sauberem, nicht gestyltem HTML tun möchten, daher die Verwendung von !important. Das heißt, ich habe es entfernt, da es eine Situationsentscheidung ist. background: noneist völlig gültig: stackoverflow.com/questions/20784292/…
Kevin Leary
Jedem sein eigenes in Bezug auf! Wichtig. Ich glaube nicht, dass ich an einem Projekt arbeiten könnte, bei dem ich gezwungen war, es zu verwenden. RE: 'none' Hier ist eine Referenz, die besser ist als ein SO-Beitrag. Wenn Sie "Hintergrund" für sich allein verwenden, verwenden Sie wirklich die Kurzschrift und greifen alle Attribute auf.
Sheriffderek
Ich habe mich verrückt gemacht über den Unterschied zwischen dem Stylen eines Bildes und einem Text innerhalb einer Schaltfläche und dem gleichen Aussehen wie außerhalb eines <button/>... in meinem Fall hat font: inherit;es den Trick getan. Danke dir!
Kate
3
Ich denke, aus Gründen der Barrierefreiheit möchten Sie diesen Umriss wahrscheinlich dort belassen. Andernfalls gibt es beim Überfahren keinen visuellen Hinweis darauf, wo Sie sich befinden. Tolle Antwort!
John Hooper
41

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>

Dan Fabulich
quelle
1
Danke dafür!
Will Ediger
Dies ist aus Gründen der Barrierefreiheit nicht ratsam. Sie müssen beispielsweise alle outlineStile für den :focusElementstatus wieder hinzufügen .
Devin
@ Devin Toller Punkt! Ich habe meinen Beitrag mit einem Vorschlag aktualisiert, einen outlineStil erneut hinzuzufügen . (Aber ich glaube nicht , dass es etwas anderes . , Dass wir brauchen , um re-add für a11y Zwecke Haben Sie nichts wissen?)
Dan Fabulich
8

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

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

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

ValRob
quelle
+ shadow-nonefür mich und es reicht aus. Vielen Dank!
Bachet
0

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

Midhat
quelle
Es muss der aktive Zustand sein, dafür hast du Recht +1. Aber ich habe es nicht richtig zum Laufen gebracht
Saif Bechan
"Ich denke" ist keine Antwort.
Shinzou