JamesonW
Ich habe versucht, Schaltflächen zu erstellen und anstelle der Standardschaltflächenbilder meine eigenen Bilder einzufügen. Der graue Rand der Standardschaltflächen bleibt jedoch bestehen und zeigt sich an der Außenseite meiner schwarzen Schaltflächenbilder.
Weiß jemand, wie man diesen grauen Rand von der Schaltfläche entfernt, also ist es nur das Bild selbst? Danke schön.
Vestride
Hinzufügen
padding: 0;
border: none;
background: none;
zu deinen Knöpfen.
Demo:
Ich weiß es zu schätzen, aber ich habe das Stylesheet so hinzugefügt, wie Sie es gesagt haben, und es hat leider nicht funktioniert. Soll ich es einfach direkt in den HTML-Code einbetten, wenn das einen Unterschied machen würde?
– JamesonW
16. Juli 12 um 1:42 Uhr
Ich habe eine Geige plus hinzugefügt background: none; zu den Knöpfen. Nehmen Sie einen Blick auf die Geige und sehen Sie, ob das für Sie funktioniert.
– Vestride
17. Juli 12 um 2:30 Uhr
Das scheint bei mir perfekt zu funktionieren.
button:focus { outline: none; }
outline:none; wird aus Gründen der Barrierefreiheit nicht empfohlen. Wenn Sie den Fokusrand entfernen müssen, stellen Sie den Benutzern bitte eine andere Möglichkeit zur Verfügung, um zu sehen, dass er den Fokus hat. outlinenone.com
– Vestride
30. Januar 17 um 22:33 Uhr
Ein weiterer Gesichtspunkt zum vorherigen Kommentar ist, dass Schaltflächen nicht unbedingt den Fokus halten sollten. Wenn Sie darauf klicken und eine Aktion ausgeführt wird, sollte der Fokus nicht verbleiben.
– Krake
27. September 2020 um 22:46 Uhr
@Octopus Wenn jemand einen Mauszeiger nicht bewegen kann, um direkt auf eine Schaltfläche zu klicken, sondern stattdessen durch die Formularsteuerelemente navigieren muss, um zu der betreffenden Schaltfläche zu gelangen, benötigt er einen Hinweis, um zu wissen, dass er das Richtige erreicht hat Taste, bevor Sie sie aktivieren.
– Hamish Lawson
19. September 21 um 22:18 Uhr
Hinweis: Im Allgemeinen neigen einige Websites dazu, die Übersichtlichkeit für alle Benutzer zu bevorzugen, insbesondere für behinderte Benutzer. Einige Websites ziehen es jedoch vor, keine Umrisse anzuzeigen, dies hängt wirklich von Ihrem Website-Design und Ihrer Website-Zielgruppe ab. Zum Beispiel können Sie für ein internes Admin-Panel tun, was Sie wollen, da Sie bereits wissen, wer Ihre Website-Benutzer sind, und Admin-Panels private Websites sind, die nicht öffentlich zugänglich sind.
– centralhubb.com
26. Oktober 21 um 4:27 Uhr
Auch auf hochgradig grafischen Webseiten sehen Dinge ohne Umrisse manchmal besser aus, wie auf diesen Geschichtenbuch-Websites da draußen. Ich bin mir sicher, dass wir sie alle ähnlich wie Computerspieldesigns gesehen haben.
– centralhubb.com
26. Oktober 21 um 4:30 Uhr
Ich hatte das gleiche Problem und obwohl ich meine Schaltfläche in CSS gestaltete, würde sie das nie abholen border:none aber was funktionierte, war das Hinzufügen eines Stils direkt auf der Eingabeschaltfläche wie folgt:
<div style="text-align:center;">
<input type="submit" class="SubmitButtonClass" style="border:none;" value="" />
</div>
Sie verwenden die CSS-Kaskade, um die Eigenschaft mit einem Inline-Stil zu überschreiben. Sie sollten sich einige Artikel über die CSS-Kaskade und die CSS-Spezifität ansehen.
– DrCord
15. Dezember ’15 um 17:30 Uhr
input[type="button"] {
border: none;
outline:none;
}
Zum Entfernen des standardmäßigen “blauen Rands” von Schaltflächen im Schaltflächenfokus:
Im HTML-Format:
<button class="new-button">New Button...</button>
Und im CSS
button.new-button:focus {
outline: none;
}
Ich hoffe es hilft 🙂
Matin
Sie können ihm ganz einfach diesen Stil geben:
MyButton {
border: none;
outline: none;
background: none;
}
das border: none; wird die Arbeit auch separat für Sie erledigen, ohne einen Umriss anzugeben (denn: Ein Umriss ist eine Linie, die außerhalb der Umrandung des Elements gezogen wird. Wenn es also keine Umrandung gibt, hat die Umrisseigenschaft keine eigene Bedeutung).
Die CSS-Eigenschaft „background shorthand“ legt alle Eigenschaften des Hintergrundstils auf einmal fest, z. B. Farbe, Bild, Ursprung und Größe oder Wiederholungsmethode. also wenn Sie seinen Wert auf setzen nonedann verhindert es, dass Ihre Schaltfläche eine Farbe, ein Bild usw. hat….
Philipp Manuel
Versuchen Sie es mit: border:0; oder border:none;
#button { Rahmen: keine; } Dies scheint gut zu funktionieren.
– Karim Shaloh
23. August 2020 um 23:43 Uhr
.
Versuchen
-webkit-appearance: inherit;oder-webkit-appearance:initial– max
27. Juni 18 um 23:47 Uhr
@Brut: Ich könnte mich irren, aber das sieht für mich browserspezifisch aus, und ich bin mir ziemlich sicher, dass Jameson etwas will, das für alle modernen Browser funktioniert.
– Michael Scheper
30. Januar 19 um 23:01 Uhr