Einheitliche Submit Buttons via CSS

Dem ein oder andern Webentwickler mag es schon aufgefallen sein:

„Einheitliche Submit Buttons sollten browserübergreifend kein Problem sein, aber weshalb sieht der via CSS angepasste Submit Button im Firefox anders aus, obwohl ein CSS-Reset verwendet wurde?“

Anhand des folgenden Screenshots wird das Problem deutlich:

Firefox without fix

Wie man hier gut erkennen kann muss irgendwo noch ein Abstand definiert sein, welcher die grüne Box im Firefox etwas breiter und höher anzeigt als in den anderen Browsern. Ein explizites margin:0 !important; und padding:0 !important; zeigt keinerlei Wirkung.

Nach einiger Recherche bin ich auf das Standard Formular Stylesheet von Mozilla Firefox und einen interessanten Beitrag bei Stackoverflow gestoßen.

Das Stylesheet kann man sich in Firefox direkt ansehen, indem man resource://gre-resources/forms.css in die Addresszeile eingibt.

Bei Webseiten mit angepassten Formularen empfiehlt es sich daher folgende Zeilen in bzw. nach dem CSS-Reset zu definieren:

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {border:0;padding:0;margin:0;}

Nach der Einbindung sehen unsere Testseiten wie folgt aus:

Firefox with fix

Schnell mal auskommentieren in JavaScript und CSS

Der Trick der JavaScript Kommentare aus dem vorherigen Artikel lässt sich entsprechend so anpassen, dass er auch in CSS-Dateien verwendet werden kann.

In diesem Beispiel soll Funktion test1 auskommentiert werden.

function test() {
  
}
/**/
function test1() {
  
}
/**/
function test2() {
  
}

Durch einfaches entfernen des 2. Sternes in Zeile 4 wird der Code bis einschließlich Zeile 8 auskommentiert.

function test() {
  
}
/*/
function test1() {
  
}
/**/