Entfernen Sie den Rand von den Schaltflächen


108

Ich habe versucht, Schaltflächen zu erstellen und meine eigenen Bilder anstelle der Standardschaltflächenbilder einzufügen. Der graue Rand der Standardschaltflächen bleibt jedoch weiterhin erhalten und wird auf der Außenseite meiner schwarzen Schaltflächenbilder angezeigt.

Weiß jemand, wie man diesen grauen Rand von der Schaltfläche entfernt, also ist es nur das Bild selbst? Danke dir.


Versuchen Sie -webkit-appearance: inherit;oder-webkit-appearance:initial
Max

1
@Brut: Ich könnte mich irren, aber das sieht für mich browserspezifisch aus, und ich bin mir ziemlich sicher, dass Jameson etwas möchte, das für alle modernen Browser funktioniert.
Michael Scheper

Antworten:


184

Hinzufügen

padding: 0;
border: none;
background: none;

zu Ihren Knöpfen.

Demo:

https://jsfiddle.net/Vestride/dkr9b/


Ich weiß es zu schätzen, aber ich habe es hinzugefügt, wie du es dem Stylesheet gesagt hast, und es hat leider nicht funktioniert. Sollte ich es einfach direkt in das HTML einbetten, wenn das einen Unterschied machen würde?
JamesonW

Ich background: none;habe den Knöpfen ein Geigen-Plus hinzugefügt . Nehmen Sie einen Blick auf die Geige und sehen Sie, ob das für Sie funktioniert.
Vestride

35

Das scheint für mich perfekt zu funktionieren.

button:focus { outline: none; }

4
outline:none;wird aus Gründen der Barrierefreiheit nicht empfohlen. Wenn Sie den Fokusrand entfernen müssen, geben Sie den Benutzern eine andere Möglichkeit, um zu sehen, ob er den Fokus hat. Outlininenone.com
Vestride

9

Ich hatte das gleiche Problem und obwohl ich meine Schaltfläche in CSS gestylt habe, hat sie das nie aufgegriffen, border:noneaber was funktioniert hat, war, einen Stil direkt auf der Eingabeschaltfläche hinzuzufügen, 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 einige Artikel zur CSS-Kaskade und zur CSS-Spezifität lesen.
DrCord


1

Der übliche Trick besteht darin, das Bild selbst Teil eines Links anstelle einer Schaltfläche zu machen. Anschließend binden Sie das "Klick" -Ereignis mit einem benutzerdefinierten Handler.

Frameworks wie Jquery-UI oder Bootstrap erledigen dies sofort. Die Verwendung eines davon kann übrigens die gesamte Anwendungskonzeption erheblich vereinfachen.


1

Sie können auch versuchen background:none;border:0px, Schaltflächen zu verwenden.

auch die CSS-Selektoren sind div#yes button{..}und div#no button{..}. hofft es hilft


Sie können auch den Hintergrund der Schaltfläche als Bilder

Oder mach es in reinem CSS. likebackground:#555; font-weight:bold: color:#fff; padding:6px 8px;

0

So entfernen Sie den Standard-Blau-Rand von Schaltfläche zu Schaltfläche:

In HTML:

<button class="new-button">New Button...</button>

Und in Css

button.new-button:focus {
    outline: none;
}

Ich hoffe es hilft :)



-2

$ (". myButtonClass"). css (["Rahmen: keine; Hintergrundfarbe: weiß; Polsterung: 0"]);


3
Lol Sie sollten jquery nicht für eine Änderung des
CSS-
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.