Dies ist die Standardfarbe einer Übergabeschaltfläche ohne einen bestimmten Stil. (mit Chrom)
Und das ist diese Schaltfläche, nachdem Sie input[type="submit"]{border-radius: 2px;}
verwendet haben.
Wie Sie die Farbe der zweiten sehen, ändert sich plötzlich ohne besonderen Grund und Sie können auch Schatten auf der rechten und der unteren Seite der Grenze sehen. ( body{direction:rtl;}
)
Was ist der Grund? Ich brauche nur die Standard-Schaltfläche mit einem runden Rahmen (nicht mehr). Gibt es eine Lösung? oder sollte ich ein Bild dafür verwenden?
Die normale, nicht gestartete Schaltfläche ist ein System-UI-Element (oder im Fall von Chrome ein benutzerdefiniertes). Daher hat es möglicherweise kein CSS-Äquivalent. Wenn Sie also versuchen, die Schaltfläche zu stylen, wird sie wieder in eine Ebene zurückversetzt, die kann formatiert werden kann, aber zufällig unterschiedliche Farben hat.
Sie werden jeden Teil der Schaltfläche komplett übernehmen und spezifizieren müssen, um einen ähnlichen Rückblick zu erhalten (und selbst wenn Sie dies tun, werden Firefox-Benutzer, die die System-Standardtasten verwenden, einen Schock bekommen) . Wenn Ihnen dieser Look gefallen hat, können Sie ihn bis zu einem gewissen Grad replizieren ( Demo ):
%Vor% Ganz zu schweigen von :hover
und :active
state styling. Warum nicht die Gelegenheit nutzen, um ein schönes Custom-Design zu entwickeln, das zu Ihrer Seite passt?
Wenn Sie versuchen, eine Schaltfläche zum Senden von Formularen zu formatieren, ist es sehr viel besser, das button
-Element zu verwenden, das vollständig gestaltbar ist. Das input type=submit
-Element ist sehr schwer zu gestalten und nicht über alle Browser konsistent. <button>
lässt Sie etwas tun.