Verschillende lettertypes formuliervelden

14-06-2013 | Marcel van Langen | HTML, XHTML, CSS | CSS, tip, formulier, text, textarea

Van alle elementen die je kunt stylen met CSS blijven formuliervelden een bron van frustratie. Een prachtige oplossing is om een framework te gebruiken als Bootstrap, Blueprint of 960. Daar is alle standaard formatting al geregeld. Maar wellicht wil je toch liever met de hand coderen. Dan zul je ongetwijfeld een verschil in font ontdekken tussen de textarea en input type text velden. Vervelend, maar oplosbaar!

Het probleem is dat textarea in de standaard settings een ander lettertype gebruikt dan een input type text. Dit moeten we dus aanpassen. Verwacht hier geen lang artikel. Je wilt natuurlijk gewoon de oplossing:

textarea, input { font-family: Helvetica, Arial, sans-serif; }

Zo eenvoudig is het. Nu geldt het voor alle input velden. Wil je het in de CSS zo oplossen dat het alleen geldt voor de textarea velden en je input type text velden, dan kun je beter onderstaande code gebruiken.

textarea { font-family: Helvetica, Arial, sans-serif; }
input[type=text] { font-family: Helvetica, Arial, sans-serif; }

Natuurlijk staat het je vrij om het lettertype te kiezen wat je wilt. Let wel op de beschikbaarheid van deze lettertypen op de devices van je toekomstige gebruikers.

Over Morloff

Morloff ontwerpt en realiseert succesvolle webtoepassingen op het gebied van procesoptimalisatie, eCommerce en rapportage door de inzet van moderne webtechnieken, sociale media en zoekmachine optimalisatie.

over ons | diensten | portfolio | contact | route

naar website IJsmonster.nl naar website ICT intermediairs naar website marcelvanlangen.com

Twitter

Morloff

Cuneraweg 169a
3911 RH Rhenen

M +31 (0)6 - 515 96 189
W www.morloff.nl
E contactformulier

Morloff op Twitter Morloff op Facebook Morloff op LinkedIn Morloff via RSS