Saif Bechan
Gibt es eine Möglichkeit, das Design einer Schaltfläche im Internet Explorer vollständig zu entfernen? Ich verwende ein CSS-Sprite für meine Schaltfläche und alles sieht in Ordnung aus.
Aber wenn ich auf die Schaltfläche klicke, bewegt sie sich ein wenig nach oben, wodurch sie unförmig aussieht. Gibt es einen CSS-Klickzustand oder Mousedown? Ich weiß nicht, was diesen Zustand auslöst.
Ich weiß, es ist keine wirklich große Sache, aber manchmal sind es die kleinen Dinge, auf die es ankommt.
Kevin Leary
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>Ich glaube nicht, dass Hintergrund ein „none“ hat – und das „!important“ ist nicht gut.
– Sheriffderek
25. Januar 2018 um 5:46 Uhr
Normalerweise möchten Sie dabei vorhandene Stile überschreiben, die für eine Schaltfläche vorhanden sind. Es ist selten, dass Sie dies mit sauberem, nicht formatiertem HTML tun möchten, daher die Verwendung von !important. Das heißt, ich habe es entfernt, da es eine Situationsentscheidung ist. background: none ist völlig gültig: stackoverflow.com/questions/20784292/…
– Kevin Leary
6. Februar 2018 um 16:39 Uhr
Jedem das Seine bezüglich !wichtig. Ich glaube nicht, dass ich an einem Projekt arbeiten könnte, bei dem ich gezwungen wäre, es zu verwenden. RE: ‘none’ Hier ist eine Referenz, die besser ist als ein SO-Post. Wenn Sie “Hintergrund” allein verwenden, verwenden Sie wirklich eine Kurzschrift und überschreiben alle Attribute.
– Sheriffderek
8. Februar 2018 um 4:05 Uhr
Ich habe mich verrückt gemacht über den Unterschied zwischen dem Stylen eines Bildes und etwas Text innerhalb einer Schaltfläche und dem Aussehen, das genauso aussieht wie außerhalb einer Schaltfläche <button/>…in meinem Fall, font: inherit; hat es geschafft. Vielen Dank!
– Kate
19. Juli 2018 um 19:52 Uhr
Ich denke, aus Gründen der Barrierefreiheit möchten Sie diese Gliederung wahrscheinlich dort belassen. Andernfalls gibt es keinen visuellen Hinweis darauf, wo Sie sich befinden, wenn Sie darüber tippen. tolle antwort aber!
– John Hopper
1. November 2018 um 20:37 Uhr
Dan Fabulich
Ihre Frage lautet “Internet Explorer”, aber für diejenigen, die an anderen Browsern interessiert sind, können Sie sie jetzt verwenden all: unset auf Schaltflächen, um sie aufzuheben.
Es funktioniert nicht im IE, wird aber überall sonst gut unterstützt.
https://caniuse.com/#feat=css-all
Warnung zur Barrierefreiheit: Für Benutzer, die keinen Mauszeiger verwenden, stellen Sie sicher, dass Sie einige erneut hinzufügen :focus Styling, z button:focus { outline: orange auto 5px } zum Tastaturzugänglichkeit.
Und nicht vergessen cursor: pointer. all: unset entfernt alle Styling, einschließlich der cursor: pointer, wodurch Ihr Mauszeiger wie eine zeigende Hand aussieht, wenn Sie mit der Maus über die Schaltfläche fahren. Sie möchten das mit ziemlicher Sicherheit zurückbringen.
button {
all: unset;
cursor: pointer;
}
button:focus {
outline: orange 5px auto;
}<button>check it out</button>Danke dafür!
– Will Ediger
21. März 2019 um 11:24 Uhr
Dies ist aus Gründen der Barrierefreiheit nicht ratsam. Sie müssen alle wieder hinzufügen outline Stile für die :focus Elementzustand, zum Beispiel.
– Dewin
3. März 2020 um 17:23 Uhr
@Devin Toller Punkt! Ich habe meinen Beitrag mit einem Vorschlag aktualisiert, eine erneut hinzuzufügen outline Stil. (Aber ich glaube nicht, dass es etwas gibt anders die wir für alle Zwecke erneut hinzufügen müssen. Weißt du etwas?)
– Dan Fabulich
3. März 2020 um 18:31 Uhr
Alte Safari-Farbwarnung: Einstellen des Textes color der Taste nach der Verwendung all: unset kann in Safari 13.1 aufgrund von fehlschlagen ein Fehler in WebKit. (Der Fehler wurde in Safari 14 und höher behoben.) “all: unset ist Einstellung -webkit-text-fill-color zu schwarz, und das überschreibt die Farbe.” Wenn Sie Text festlegen müssen color nach der Verwendung all: unsetachten Sie darauf, beide einzustellen color und die -webkit-text-fill-color auf die gleiche Farbe.
– Dan Fabulich
21. Dezember 2021 um 6:26 Uhr
Darren Shewry
Ich nehme an, wenn du sagst ‘Klicken Sie auf die Schaltfläche, sie bewegt sich ein wenig nach oben‘ Sie sprechen über den Mausklickstatus für die Schaltfläche, und dass sie in ihren normalen Zustand zurückkehrt, wenn Sie den Mausklick loslassen? 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 wirklich stoppen/überschreiben/deaktivieren können, was mich dazu veranlasste, mein Markup ein wenig zu ändern, um diese Bewegung zu ermöglichen und das allgemeine Aussehen der Schaltfläche für die verschiedenen Zustände nicht zu beeinflussen.
Dies ist mein letztes Markup:
<span class="your-button-class">
<span>
<input type="Submit" value="View Person">
</span>
</span>Versuchen Sie, den Rahmen von Ihrer Schaltfläche zu entfernen:
input, button, submit
{
border:none;
}
In Bootstrap 4 ist es am einfachsten. Sie können die Klassen verwenden:
bg-transparent und border-0
+ shadow-none für mich und es reicht. Danke!
– Bachet
3. Oktober 2019 um 14:16 Uhr
Tasos K.
Fügen Sie Ihrem Button einen einfachen Stil hinzu
.btn {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
+ shadow-none für mich und es reicht. Danke!
– Bachet
3. Oktober 2019 um 14:16 Uhr
AH
Ich denke, es ist der Zustand der Schaltfläche “aktiv”.
Es muss der aktive Zustand sein, dafür hast du Recht +1. Aber ich habe es nicht richtig zum Laufen bekommen
– Saif Bechan
17. März 2010 um 18:10 Uhr
“Ich denke” ist keine Antwort.
– Shinzu
13. November 2018 um 16:07 Uhr
