Styling HTML 5 Forms #3 - Styling Checkboxes

Hey ninjas, in this tutorial I'll show you how we can use the previous technique in the last video, to also style custom checkboxes in your forms.

----- COURSE LINKS:

---------------------------------------------------------------------------------------------
You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage...

========== PSD to WordPress Playlist ==========

============== The Net Ninja =====================

================== Social Links ==================

[cedric_ds]

Is no one gonna talk about how loud that sound is in the beginning? RIP everyone, headphone user or not 💀💀
Glad you got rid of that in your newer videos.

[Attilabre]

Great job, I'm looking forward to the rest of the videos! Keep up the good work. Your BIGGEST fan.

[clarenceworley]

Is there a tool for measuring position of sprites? Its easy when you;'re giving us the coordinates, but when I begin using my own custom images what would be the best way to map the coordinates?

[mehimehdi]

thank you broo, but when i want to do the same with different cheks or something and i design them in Photoshop, how to know in which position are they ? and how many pixels i need to use ?

[pipocacripops]

ok so what size, should we have fpr our custom pictures for the radio input? is there a site we can download pictures only for radio inputs?

[hagarosama]

why images are not showing neither in radio nor check box?
i checked everything and still nothing....could you help me plz?

[lazalaza]

Why define line-height if you can instead position the background image differently (-34/35px)?

[navi]

that has been bothering me for a while but the video and the audio in the entire playlist asre slightly desync'd. You can tell from the typing sounds, delay then the code appears on screen.

[online.development]

Video #4 & #5 not available => This video has been removed by the user. :(
.

[arnoldbozsanyi]

I really miss the ninja yells! :( (used to scare my fiance:D)

[Michael-Martell]

Having issues with:
url=(checks.png) 
not working after checking your code multiple times?
(This is for helping anyone else who had the same issue as me)

Steps:
1. I checked the code. 
2. Stylesheet is obviously linked correctly.
3. Male/Female and Web/Photoshop and Madonna are displaying indented from page left in the browser.
4. Doesn’t matter if i put .checks.png in a different folder or not or rename it - its not displaying. I can open up the image in the browser by itself just fine.
5. Within my browser (Chrome) Right Click > Inspect and at the bottom under console, it (For me) displayed an error: Could not find the file) even though I tried copying the relative path and multiple other things.

(This is what worked)
6. Open up checks.png in the browser by itself. Copy the entire file path. mine was: 

(I’m on a Mac)

and insert that into the code as: background:url( INSERT FILE PATH HERE ) no-repeat;
and that worked for me. 


Took me about 4 hours to figure this out, plus seeing that there was an error within the console inspection was new for me too! Hope this helps and I’m absolutely loving the tutorials! Thanks sooo much!