CSS Formulieren
Het uiterlijk van een HTML-formulier kan sterk worden verbeterd met CSS.CSS tekstvelden stijlen
Door gebruik te maken van de eigenschapwidth kun je de breedte van het tekstveld bepalen.
Volledig naam:
CSS ruimte aan de velden voegen
Gebruik de eigenschappadding om ruimte in het tekstveld te creëren.
Volledig naam:
E-mail adres:
Voorbeeld:
input[type=text] {
width: 100%;
padding: 12px 10px;
margin: 8px 0;
box-sizing: border-box;
}
Zoals je ziet hebben we in het bovenstaande voorbeeld de eigenschap box-sizing toegepast en hebben we deze de waarde border-box gegeven. Dit zorgt ervoor dat de opvulling en eventuele randen worden meegenomen in de totale breedte en hoogte van de elementen.
 |
Als je in je formulier veel tekstvelden hebt, wil je misschien ook wat marge aan toevoegen. Door margin te gebruiken kan je wat ruimte buiten de randen creëren. |
CSS randen bewerken
Door gebruik te maken van de eigenschapborder kun je de grootte en kleur van de rand veranderen. Indien gewenst kun je ook gebruik maken van de eigenschap border-radius om afgeronde hoeken aan de randen toe te voegen, op deze manier kun je de randen eenvoudig bewerken.
Volledig naam:
Als je wilt dat er alleen een onderrand zichtbaar wordt, dan kan je de eigenschap border-bottom gebruiken.
Volledig naam:
CSS achtergrondkleur tekstvelden
Om de achtergrondkleur van een tekstveld te wijzigen kun je de eigenschapbackground-color gebruiken. Je kunt ook de tekstkleur wijzigen van een tekstveld zodat deze opvalt en beter te lezen is.
Volledig naam:
CSS focus en tekstvelden
De tekstvelden zullen bij sommige browsers blauw worden wanneer deze een focus krijgt, dat wil zeggen als er op een tekstveld wordt geklikt veranderd de kleur van het veld. Je kunt dit gedrag van de tekstvelden verwijderen door de eigenschapoutline: none te gebruiken.
|
De focus verschuift van het ene object naar het andere meestal door met de muis erop te klikken of door op de tab-toets te drukken. |
CSS afbeelding in een tekstveld
Om een pictogram of een afbeelding in een tekstveld te plaatsen, gebruik je de eigenschapbackground-image en positioneer je deze met de eigenschap background-position.
Voorbeeld:
input[type=text] {
background-color: white;
background-image: url('images/search.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}
CSS tekstvelden met animatie
In dit voorbeeld gebruiken we de eigenschaptransition om de breedte van de tekstveld zoeken te animeren wanneer deze de focus krijgt, dat wil zeggen als er op geklikt wordt.
Voorbeeld:
input[type=text] {
transition: width 0.5s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
CSS stijlen van tekstvakken
Een tekstvak (textarea) is een extra grote tekstveld dat geschikt is voor het invoeren van onbeperkte hoeveelheid tekst door de gebruiker. Om te voorkomen dat het formaat van de tekstvak wordt gewijzigd door de gebruiker kun je de eigenschapresize gebruiken. Dit schakelt de "grabber" in de rechteronderhoek uit.
Voorbeeld:
textarea {
width: 100%;
height: 100px;
padding: 12px 10px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
CSS stijlen van select menu's
Voorbeeld:
select {
width: 100%;
padding: 16px 10px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
CSS stijlen van knoppen
Voorbeeld:
input[type=button], input[type=submit], input[type=reset] {
background-color: #4682B4;
font-size: 16px;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
CSS responsive layout
Pas het formaat van het browservenster aan om het effect te zien. Wanneer het scherm minder dan 500px breed wordt, dan worden de twee kolommen onder elkaar weergegeven in plaats van naast elkaar.
