Vrijwel alle websites hebben op hun website wel een formulier, denk bijvoorbeeld aan een nieuwsbrief- of contact-optie. Je ziet echter in veel gevallen dat hier gewoon de standaard, door de browser bepaalde, invoervelden voor worden gebruikt. Prima natuurlijk, maar je kunt ze ook helemaal naar eigen wens aanpassen door middel van CSS. In de webtip van vandaag gaan we daarom kijken hoe we dit kunnen. Aan het einde van deze webtip, zijn je invoervelden voorzien van een ronde hoek en een gradient achtergrond.

Eigenlijk is het heel simpel. De invoervelden, van welk type dan ook (text, password, een textarea, een drop-down menu etc.), kunnen gewoon als elk ander element gestyled worden (niet elk form element ook op dezelfde manier), we moeten echter eerst enkele standaard dingen verwijderen, zoals de border die er standaard omheen staan. Voor de rest van deze webtip zullen we gebruik maken van het simpelste 'text'-invoerveld.

Als eerst verwijderen we de randen en vervolgens gebruiken we het volgende plaatje waarin we straks iets kunnen typen. Uiteraard moeten we het input-veld even groot maken als ons plaatje.

.input_rounded {
border: 0px;
background: url('form_input.png') no-repeat;
height: 37px;
width: 197px;
}

Voegen we de class nu samen met de html van het input-veld ('<input type="text" class="input_rounded" />'), dan zien we dat het er al aardig uit ziet, maar dat er nog wat ruimte aan de linker- en rechterkant bij moet. Daarom voegen met 'padding' wat extra ruimte in (dit halen we er bij de hoogte en breedte weer af).

.input_rounded {
border: 0px;
background: url('form_input.png') no-repeat;
height: 17px;
width: 177px;
padding: 10px;
}

Demo

Een demo van deze webtip vind je hier.