’n Checkbox op maat

Op je computer, tablet en smartphone zitten verschillende browsers. Windows werkt(e) voornamelijk met Internet Explorer, terwijl Mac machines standaard met Safari geinstalleerd komen. Dan is er natuurlijk nog de gratis browser Chrome van Google, er is Firefox, je hebt Opera en dan ben ik er nog een aantal vergeten. In webdesign land speelt (of speelde) nog wel eens de discussie of een website er in alle browsers tot op de pixel perfect hetzelfde moet uit zien.

Persoonlijk ben ik er nog niet helemaal uit. Aan de ene kant ziet het er wel strak uit als een website in alle browsers gelijk is. Anderzijds kan het een behoorlijk geklooi zijn om tot op de pixel perfect te zijn in verschillende, veelal verouderde browsers. Op zich zijn er ook frameworks die je een deel van het probleem uit handen nemen. Deze hebben voor een selectie browsers allerlei website onderdelen (checkbox, selectbox, formulier, knoppen etc.) voorgeprogrammeerd zodat alles er uniform uitziet. Nadeel hiervan is dat je dan weer net vastzit aan een design dat je niet mooi vindt. Stel nu eens dat je een checkbox zou willen die niet een vinkje toont, maar een kruisje of een op-maat-gemaakt vinkje, hoe zou je dat dan aanpakken.

Zoek eens op checkbox in Google afbeeldingen!

Zoek eens op checkbox in Google afbeeldingen!

Hiervoor ben ik in de tutorial van de CSS Ninja gedoken en zonder kleerscheuren had ik daarna een heel mooie custom checkbox. Het geheim: knoop een checkbox vast aan een label (door de checkbox id=”cbox” te geven en voor het label het attribuut for op “cbox” te zetten. Mag ook iets anders zijn, maar zorg dat id en for gelijk zijn!), maak de checkbox onzichtbaar en style het label. Maak voor dit laatste gebruik van een achtergrond afbeelding die bestaat uit de aan- en uitgevinkte versie van je checkbox in combinatie met CSS background-position.

Hieronder een klein voorbeeld voor precies een custom checkbox. Je kunt de HTML en CSS direct in jouw website plaatsen en klaar. Eerst de HTML

<form>
        <input type="checkbox" id="cbox" /> <label for="cbox"></label>
</form>

En dan nu de bijhorende CSS:

form input
{
    	padding: 0;
    	margin: 0;
    	height: 16px;
    	width: 16px;
    	position: absolute;
    	left: 0;
    	opacity: 0;
}
form label 
{ 
    	line-height: 16px; 
    	color: #fff; 	
            padding: 0 0 0 18px;
}

form input + label
{
        background: url(custom_checkbox.png) -2px -23px no-repeat;
        height: 16px;
}

form input[type=checkbox]:checked + label { background-position: -2px 0px; }

En tenslotte het achtergrond plaatje. Het bovenste deel wordt getoond als de checkbox in uitgevinkte modus is, het onderste plaatje wanneer de checkbox aangevinkt is.

custom checkbox

Er zijn nu natuurlijk developers die zeggen: Het inladen van een extra plaatje is niet goed voor de performance en die moet je ook gelijk geven. Maar: het ziet er wel blits uit, hoewel het plaatje kan nog wel wat scherper eigenlijk.

Ik wil graag afsluiten met het probleem dat ik daarna tegen kwam en dat alleen optrad in Firefox. Ik had namelijk niet maar een zo’n checkbox maar een hele rij, zelfs zoveel dat de pagina een verticale scrollbar kreeg en wat gebeurde er toen? Op het moment van klikken op de checkbox scrollde de pagina naar de top. Net zoiets als wanneer je een anchor tag <a> gebruikt met # als href zonder af te vangen met return false. De afhandeling van het change event van de checkbox, dat afgevuurd wordt als de checkbox van status (aan of uitgevinkt) veranderd was de eerste plek waar ik dus een return false en later een preventDefault probeerde. Maar dat werkte allemaal niet. Toen kwam ik op het idee om een click event vast te maken aan het label en daarop een preventDefault toe te passen, maar vlak daarvoor nog even snel het click event van de checkbox te triggeren. Hehe, ik had Firefox verslagen. Hieronder mijn stukje javascript om dit laatste probleem op te lossen.

$("form label").on("click", function(){
    var id = $(this).attr("for");
    $("form input#"+id).trigger("click");
    return false;
})

Zoals mijn oude leermeester dan zei: Op naar de volgende bug!

Update
Ik heb ook een website gevonden waar je al de bovenstaande ellende bespaart wordt. Gebruik is waarschijnlijk ook eenvoudiger. Maar dan heb je het niet zelf gemaakt!


Mijn Twitter profiel Mijn Facebook profiel
Pim Hooghiemstra Webdeveloper and founder of PLint-sites. Loves to build complex webapplications using Vue and Laravel! Laatste bericht
Sorting table dates in a Vue CLI project

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *