Hoe kun je je inputvelden mooier maken?
Jeroen Hoekstra |
2006-04-19 |
Programmeren en techniek
In een eerder artikel hebben we het verfraaien van de standaard grijze knoppen in een formulier behandeld, maar hoe zit het nu met de inputvelden van een formulier? Je raadt het al. Ook deze kun je met CSS verfraaien.
Cascading Style Sheets worden ondersteund door Microsoft Internet Explorer 3 en hoger, Mozilla, Netscape Navigator 4 en hoger en Opera 3.5 en hoger.
Laten we eens een simpel formulier maken met 1 inputveld. De code ziet er als volgt uit.
<form action="script" method="post">
<input
type="text">
</form>
Hieronder zie je een screenshot van het resultaat:
Zoals je kunt zien heeft een standaard inputveld een witte achtergrondkleur en 3D-randen. Het kan voorkomen dat deze vormgeving niet past binnen het design van je website. Je kunt dan de inputvelden een CSS style meegeven zodat deze een andere look krijgt. Laten we eens de volgende code bekijken:
<form action="script" method="post">
<input type="text"
style="background-color : #FFFFCC; border : 1px solid
#000000">
</form>
Zoals je kunt zien hebben we de volgende CSS style toegekend aan het ene inputveld:
style="background-color : #FFFFCC; border : 1px solid #000000"
De eigenschap 'background-color' spreekt voor zich en geeft de achtergrondkleur van het inputveld weer. De eigenschap 'border' is een verkorte eigenschap om verschillende border-eigenschappen in één keer op te sommen.
Zo kun je dus
border : 1px solid #000000;
opsplitsen in:
border-width : 1px; (bepaalt de dikte van de
randen)
border-style : solid; (bepaalt de stijl van de
randen)
border-color : #000000; (bepaalt de kleur van de randen)
Hier vind je een overzicht van CSS-eigenschappen die je kunt gebruiken voor de opmaak van je website.
Hieronder zie je een screenshot van het resultaat:
Zoals je kunt zien heeft het standaard inputveld een metamorfose ondergaan en is de witte achtergrondkleur veranderd in een lichtgele achtergrondkleur en de 3D-randen hebben plaats moeten maken voor strakke zwarte randen.
Probeer het maar eens uit en speel eens met andere CSS-eigenschappen. Voeg bijvoorbeeld eens CSS-eigenschappen toe die de ingevulde tekst van een inputveld verandert.
Succes!
