Revised and updated Nov 2019,also now without the need for an image sprite in v2.0!
One of the most challenging pieces to get right (off the bat) is styling custom native elements. Not only do they not want to be styled, they’ll do almost everything to stick it to you and ignore everything you throw at it. However, after compiling a few different articles from other CSS guru’s I’ve put together my own spin. Usually, I would do an all CSS solution, but dealing with pseudo-elements can sometimes get a bit gnarly and fickle when dealing with such small pixel dimensions. I’ve therefore opted for a CSS + image sprite hybrid. Check it out!
The output
Here’s what the below markup should produce if you’ve:
- Added the HTML code.
- Added the Sass code and compiled it.
- Downloaded and linked to the app-icons.png file.
The Markup
Copy and paste this example code into your document. For now, you can leave the names and IDs as-is, but once you’re set up you would generate your own code with your own checkboxes :).
The Sass Code
Create a new .scss file (such as checkboxes.scss) and copy the Sass into it from below. The sizes and paddings should match up to the same size as most default browser checkbox sizings = great for cross-browser custom CSS checkboxes.
Note: you will also need to download the app-icons.png file, linked below.
The checkbox icon files
To have custom icons, you need the custom icon file! Attached below is a file app-icons.png - modify this file with your own icons. I apologise, I wrote this article a loooong time ago – I should really have a Sketch App version ;).
That should really be it. Have a go and get in touch if you need any further help – I’m always keen to pass on knowledge!
