Styling HTML 5 Forms #2 - Styling Radio Buttons

Yo gang, in this HTML5 form styling tutorial, I'll show you how we can style radio buttons with some custom imagery and just a little bit of CSS.

----- 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 ==================

[SP-qhlp]

hey guys try this
label[for="male"], label[for="female"]
{
transition:all .3s ease-out;
}
its even more awesome...thnks man great tutorial

[Dan-kjny]

if someone is still watching this and have a problem with the images not showing in label[for="male"], label[for="female"]. Adding "../" in the file path worked for me.

background: url{../img/checks.png) no-repeat;

[justkamilcom]

You make the best tutorials on Youtube Thanks

[kfclone]

May I know the font-family that you chose for Atom? Great tutorial, Net Ninja

[Darkest-Knght]

I'm trying to follow this tutorial using the images you provided to implement this on my own registration form, but so far, have not been able to get the radio buttons or the checkboxes to show the new images, just blank spaces. I've managed to get the text color to change when you select both types, but no images. I've made sure my labels are after my inputs for both, have even followed your tutorial with your html and css pages and managed to get everything to work, but so far unable to get my form to work as well. Any suggestions?

[nemogames]

Hey shaun im unable to find the css codes in the github..!! All i see is the comments you wrote for the codes only, but yeah i found the html (index.html) file .. help me please.!

[Marquez]

Well that's an awesome tuts, can you tell me the font here .I'm always looking for a good one, but this one really rocks ...

[tranickchohung]

What software do you use to write code? Link, please.

[pigmalion]

Hi! Thanks for another great tutorial :). Can someone explain me why margin-bottom worked only when applied "display: inline-block"? Can only blocks have margins? Thanks!

[dhairyasharma]

ok, ..help me, ...what moves by 32 pixels in y-axis???

[Rco]

Ninja, which font do you use in Atom?

[nezmustafa]

so does background position: 0px -32px;
move the checks image to the left by 32 pixels?

[haerinsong]

Hello, thanks for the awesome tutorial! But I don't know why the input / label is not working for me :(any advice?

[skidzs]

I can't able to understand how the image select the first radio button.... Anyone clarify mee

[AryanKumar-vwtu]

what package do you have for autocomplete in atom.

[MoutPessemier]

How come I can select both radio buttons?

[jovanjovanovic]

do you have tutorial for css images sprites