Styling af webforms

Webformularer kan ofte være besværlige at style pænt, da de forskellige browsere fortolker, og tilføjer ders egen styling.
En måde at komme rundt om dette problem på, er at sørge for, at udgangspunktet for den videre styling er ens i de forskellige browser.

Jeg har sat box-sizing på for at sikre mig, at evt. padding ikke indvirker på størrelsen af inputfeltet!

Webform CSS reset

input, textarea, select {
   -webkit-appearance: none;
   width: 100%;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   outline: none;
   border: 1px solid #ddd;
   padding: 0.5em;
}

Outline
Ønsker man outline i sin webform, kan det være en god ide, at tilpasse farven efter hjemmesidens andre farver. Det gøres ved hjælpe af:

outline-color: farvekode;

Placeholder
Styling af placeholder er desværre lidt besværligt, da hver browser skal rammes individuelt.

::-webkit-input-placeholder {
   color: #fff;
}

:-moz-placeholder {
   color: #fff;
}

::-moz-placeholder {
   color: #fff;
}

:-ms-input-placeholder { 
  color: #fff;
}