HomeОбразованиеRelated VideosMore From: The Net Ninja

Styling HTML 5 Forms #2 - Styling Radio Buttons

262 ratings | 18744 views
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: + Repo - https://github.com/iamshaunjp/styling-html5-forms-playlist + Atom editor - https://atom.io/ CSS Playlist - https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT HTML Playlist - https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc --------------------------------------------------------------------------------------------- You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage... SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1 ========== PSD to WordPress Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gnow7e45LQFkNVxwQ5BH-W ============ Node.js for Beginners Playlist ============= https://www.youtube.com/playlist?list=PL4cUxeGkcC9gcy9lrvMJ75z9maRw4byYp ============== The Net Ninja ===================== For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ================== Social Links ================== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk
Html code for embedding videos on your blog
Text Comments (41)
Singham Pranai (3 months ago)
hey guys try this label[for="male"],label[for="female"] { transition:all .3s ease-out; } its even more awesome...thnks man great tutorial
Mout Pessemier (1 year ago)
How come I can select both radio buttons?
Ertan Kara (1 year ago)
If you give them different name values you can select them all. But that sounds like something for checkbox.
Mout Pessemier (1 year ago)
lil boy
MysticLoLPlayer (1 year ago)
LOL goodmornin
Miljan Ristanovic (1 year ago)
it works! ((:
pigmalion93 (1 year ago)
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!
sankyeat (1 year ago)
I think it may have been because the vertical margins may have collapsed with the block level elements and setting them to inline-block overcame this issue as they have greater horizontal margin than vertical margins so they don't collide. I m not sure if this is the right answer, someone please correct me if i'm wrong here. Thanks.
Aryan Kumar (1 year ago)
what package do you have for autocomplete in atom.
Văn Dũng SunBin (1 year ago)
What software do you use to write code? Link, please.
PRW_SANT ManGayak (1 year ago)
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.!
kf channel (1 year ago)
May I know the font-family that you chose for Atom? Great tutorial, Net Ninja
Sufyan Zaheeri (2 years ago)
Hello, thanks for the awesome tutorial! But I don't know why the input:checked + label is not working for me :( any advice...?
Craig Johnson (11 months ago)
I'm use web frameworks (Django and AdonisJS) and originally did the CSS in an external file. I had to move a code block to internal style tags on my HTML5 page: <style> label[for="male"], label[for="female"] { margin-bottom: 10px; display: inline-block; padding-left: 26px; background: url(images/checks.png) no-repeat; background-position: 0 -32px; line-height: 2rpx; cursor: pointer; } </style> I kept the rest of the code in the external CSS file and everything works.
madumedodo (1 year ago)
Hello. Did you manage to solve the issue and how? I am experiencing same issue and I put the for="" on HTML. But nothing
Oskr (1 year ago)
Did you add for="" attr to the html tag?
Stefan Jovanovic (1 year ago)
Have you solved the problem? Anyone?
Stefan Jovanovic (1 year ago)
Not working for me either...
Nez Mustafa (2 years ago)
so does background position: 0px -32px; move the checks image to the left by 32 pixels?
Dragos C (2 years ago)
It moves it on the Y scale (horizontal). It moves it up by 32 pixels! I hope you got it then!
Haerin Song (2 years ago)
Hello, thanks for the awesome tutorial! But I don't know why the input / label is not working for me :(any advice?
Nazariy Mokriy (2 years ago)
Ninja, which font do you use in Atom?
Nazariy Mokriy (2 years ago)
The Net Ninja (2 years ago)
Hey, I'm always changing fonts. Right now I've moved on to Futura which is nice. I'll find this one later and let you know.
Marquez857 (2 years ago)
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 ...
Walid Mahade (2 years ago)
justkamil com (2 years ago)
You make the best tutorials on Youtube Thanks
premier69 (2 years ago)
what the hell ae you saying? nout?
GoTime (2 years ago)
Or actually maybe you meant when he said "naught" which means nothing or 0
GoTime (2 years ago)
siddhartha rao (2 years ago)
which IDE r u using in this tutorial?
siddhartha rao (2 years ago)
premier69 (2 years ago)
he is using Atom (by github) it's free!
Tam Phung (2 years ago)
Awesomely awesome
The Net Ninja (2 years ago)
Thanks :)
Jovan Jovanović (2 years ago)
do you have tutorial for css images sprites
The Net Ninja (2 years ago)
Hey, not at the minute, but it's a good idea so will maybe tack one on the end of my CSS playlist soon :)
premier69 (2 years ago)
when you figure that out you got one step further and do those buttons in svg :)
Soirsee Carl (2 years ago)
Owen Maleta (2 years ago)
keep up the good work
The Net Ninja (2 years ago)
:) will do, thanks

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.