Checkbox stijlen in HTML

Checkbox stijlen in HTML


U kan hebben gezien kleurrijke selectievakjes op het Web en vroeg zich af hoe ontwikkelaars ze zijn gemaakt. Het geheim ligt in weten hoe je om CSS te gebruiken om webpagina's weergegeven welke manier die je wilt. Als u trekken aandacht een checkbox wilt, misschien bent door te draaien de achtergrond rode en omgeven met een rand van 10 pixel, u vrij om te doen dat als je eenmaal leert een paar CSS styling regels.

CSS

De kleur, grootte, positie en andere eigenschappen van webpagina objecten wijzigen door een wijziging van hun CSS-kenmerkwaarden. CSS, kort voor Cascading Style Sheets, kunt u het maken van CSS-klassen die deze eigenschappen definiëren. Pagina-elementen kunnen vervolgens verwijst naar een CSS-klasse met de naam. Als een selectievakje op uw webpagina verwijst naar deze CSS-klasse, krijgt het de eigenschappen die zijn gedefinieerd in de klasse die u hebt gemaakt. Door een pagina-element styling van de HTML-code waarmee het element worden gescheiden, maak je de code eenvoudiger en gemakkelijker te onderhouden. Bijvoorbeeld, als u wijzigen van de tekstkleur van alle tekstvakken van geel tot groen één dag wilt, gewoon wijzigen het woord "geel" naar "groen" in een interne CSS-klasse. Alle selectievakjes die verwijzen naar de klasse wordt groene tekst weergegeven.

Selectievakjes

Een checkbox is een HTML-besturingselement voor tekstinvoer. De HTML input-tag kan een verscheidenheid van unieke besturingselementen maken. U kunt het gebruiken om een tekstvak of een knop naast een checkbox te maken. Ontwikkelaars plaats selectievakjes op webpagina's om te verzamelen informatie van bezoekers van de site. Een checkbox, die een gecontroleerd en ongecontroleerd staat heeft, is de perfecte beheersing te gebruiken wanneer u een gebruiker om een Ja of Nee besluit. Wanneer u een checkbox aan een pagina toevoegt, krijgt het standaardopmaakprofiel. Het vak heeft een standaard vierkante vorm, heeft het geen achtergrondkleur en de tekstkleur is zwart. Veel ontwikkelaars zijn blij met deze verschijning als hun checkboxes geen prominente rol op de webpagina spelen. U wil wellicht echter de aandacht vestigen op een bepaalde checkbox of gewoon liven omhoog uw webpagina met decoratieve afbeeldingen, kleuren en tekenstijlen. U kunt dit doen door uw checkboxes styling.

Fundamentele Styling

Ontwikkelaars maken CSS klassen door hen instellen in een webpagina's sectie van de stijl zoals in het volgende voorbeeld wordt getoond:

.redFontWithBorder {achtergrond-kleur: rood; border-style: solid; border-breedte: 2px;}

Deze klasse met de naam ".redFontWithBorder" definieert de CSS-eigenschappen die nodig zijn om een rand rond een pagina-element toevoegen en wijzigen van het lettertype op rood. Vervolgens kunt u deze klasse verwijzing naar een checkbox als volgt toevoegen:

< input type = "checkbox" class = "redFontWithBorder" / >

Wanneer een browser wordt weergegeven dit checkbox, krijgt het aankruisvak in de stijleigenschappen gedefinieerd door de CSS-klasse. Veel meer CSS kenmerken bestaan, zoals achtergrondkleur, lettertype-grootte, lettertype-familie en randdikte. U kunt zelfs CSS width en height attributen gebruiken om in te stellen van een checkbox afmetingen. Mix van verschillende CSS attributen als de stijl die past bij uw behoeften wilt maken.

Geavanceerde Styling

Het World Wide Internet Consortium, bestuursorgaan van het Internet, weergegeven zeven "pseudo-klassen" u ook selectievakjes stijl kunt. Deze klassen zijn ": actief," ": focus",": hover," ": ingeschakeld," ": uitgeschakeld," ": onbepaalde"en": gecontroleerd." Een checkbox kan meerdere statussen hebben. Wanneer bezoekers van de site een webpagina met uw checkbox opent, zien ze het selectievakje standaardstijl of elk opmaakprofiel dat u hebt gemaakt voor de checkbox. Wanneer een gebruiker de checkbox controleert, verandert de toestand in 'afgevinkt'. Wanneer een gebruiker een muiscursor over een checkbox beweegt, verwerft het aankruisvak in een "zweven" staat. Het uitschakelen van een selectievakje geeft het een "handicap" staat. Met behulp van een van de zeven pseudo-klassen, kunt u uw checkboxes verschillende stijlen op basis van hun huidige status weergeven.