Custom Checkbox CSS | Styling Checkbox | Pure CSS Tutorial

[@AaronEstebanSEO]

I think an even easier way that doesnt require a ton of css styling code, is to use 2 separate svg images of a checkbox. One thats not checked, and then a copy of what it looks like when it is checked. So two separate images. Then create a boolean in Javascript with true or false. When the user clicks on the first unchecked svg image, the boolean switched to true and changes the image to the checked image. If true, then some value that you set to this image will return inside of the function the way that you want it to. This is super easy to do without ever using a real checkbox from an input or requiring its value.

[@pastelwortell]

I ever try it, but the svg will appear beside on the original checkbox, then i make the webkit appereance none, but the checkbox lost their value, and i can't edit anything by those checkbox.😅

[@gaming_with_raza7867]

Extra Images = Slow Website

[@joanajimenezfernandez8657]

I'm struggle with this four hours and your solution is super simple and easy, thank you very much

[@CodingArtist]

Great to hear!

[@Phoenix_Arise_J]

It’s been like over a 100 video watching on KZbin without joy but this made me smile 😊 I envy (positively) respect and love those who have the coder skills. Btw the background music was a perfect choice, thank you for sharing ❤

[@tiecat1833]

I’m learning Html and CSS from KZbin, I'm using my phone to do it and your video helped me a lot!

[@CodingArtist]

Great to hear!

[@harshilchudasama2245]

I liked your every projects on HTML , CSS and JS. You should also go on stiky Navigation Bar. That is also main thing in websites. Thank You. Keep it up...

[@Bioskopeia]

thank you sooo much!! who would say that style a checkbox would be so complicated haha, couldn't do it without this video!

[@CodingArtist]

Great to hear!

[@konstantinreut2577]

Thanks, bro! It's simple and ingeniously!

[@movieloverss2496]

Really u r queen of CSS 👌👌🥰

[@aubisoka]

Thank you for this Tutorial. It was fun to make it this way.

[@celdan714]

Wow! It's like meditate. Peace after seeing the results

[@WilledWest]

Really nice way to style a checkbox, the only issue here is that when you're styling it this way, the checkbox has a min width and height which is too big and can't be reduce more than that.

[@RenardBergson]

Thank you so much, buddy! I used that with scss and it worked as well.

[@CodingArtist]

Glad it helped!

[@rina_joke]

Просто спасибо большое, еще не встречала такого понятного тутариала(?) Но благодаря вам легко справилась с поставленной задачей, еще раз спасибо)

[@k.ananthakumar5860]

How to checkbox transparancy??

[@Vizzent01]

lol i made like 5 mistakes but i fixed it in another way by adding the icon tag and adjusting it im getting good at this 😍

[@JustHereForTheSnacks-OK]

Good video, keep it up.

[@yummyfunnybunny5167]

i followed this to a T and it doesn't work. the check mark used by font awesome doesn't show up. is something in this video outdated?

[@CodingArtist]

Are you using the right font awesome CDN?

[@priyadharshinimuthukumar8970]

thank you so much... its really helped me alot

[@Karol-fl8cp]

¡Tiene exactamente lo que necesitaba, gracias! ¡Y gracias al Universo por usted!

[@damiendoman5584]

Thanks, works well! What's the difference in meaning between :after :checked and :checked:after?

[@CodingArtist]

:after - It's a pseudo element. It can be used to insert some content after the element. :checked: - It will target/select the inputs that are checked. :checked:after - This will target the ':after' pseudo element of the 'checked' input.

[@Paulo280713]

very good content, loved it

[@aravindvv2276]

Your videos are great! Keep posting 😊👍

[@PinoyGuitarTutorials]

does it works also in IE 11 and Edge?

[@CodingArtist]

You dont't have to worry about IE since it will no longer be supported from June 15, 2022. It works perfectly on Edge.

[@ducdominh9390]

Thanks u my lord 👑

[@941confidential]

Greatest Tutorial I‘ve seen so far. The only thing I don‘t get is the ,,checked icon“. Instead of it displays /fooC. My code is correct but it won‘t display the checked Icon. I hope you can help. Best regards and thank you

[@CodingArtist]

Are you adding the 'font-weight' on line number 36 in CSS? Please do check that. Also, if that doesn't work, mail me and I will send you the zip file of source code.

[@gordoncoding]

nice logo animation at the beginning. why not adding some verbal explanation along the coding?

[@mohammedhammed3892]

Great video. Thank you

[@sofiaborovskaia3714]

it's quite difficult to follow, as all the active changes happen at the very bottom of the page. Video timeline bar hides everything you're trying to show us

[@victoriacesar4645]

Thank you so much! This video and code helped me a lot, thank you

[@CodingArtist]

Great to hear!

[@shivanidhende5229]

I am trying to use this in angular,but the check icon is not getting displayed,can you please help?

[@CodingArtist]

This might help: www.angularjswiki.com/angular/how-to-use-font-awesome-icons-in-angular-applications/

[@patricksantos6800]

Fez parecer fácil!!! Belo video. Made it look easy !!! Good video

[@abdurrazzak1612]

great, keep posting

[@juancamiloosorio5610]

Que crack, tremendo aporte a la comunidad, fácil y rápido.

[@abiamarulloh2183]

Thank you very much ❤️, it's help me 😉

[@grzegorzmolin]

thanks bro!

[@KichikDev]

Where can we find the code? Write this under the video

[@KichikDev]

For example github link

[@RECONROYYT]

Thanks a lot..

[@V3rd0]

Fácil e prático, muito obrigado!!

[@florenciobritez5521]

Thank you so much!

[@CodingArtist]

You're welcome!

[@レオリオ-z2i]

Whats name intro in opening video

[@CodingArtist]

Its in video description

[@Wanderer2035]

So stupid that requires so much code to do something so simple. All there should be is 3 lines of code, a background color for the box, a color for the checkmark, and a width for the checkbox size

[@solongdygaming4729]

How can you change the color of the checkmark?

[@i1s_rishabh]

Nice

[@lecsu131]

Subbed!

[@KichikDev]

kodni qayerdan topishimiz mumkin? Shuni video tagida yozib qoldiring

[@KichikDev]

Where can we find the code? Write this under the video

[@MrQhuin]

You can just use button and put check icon onchange

[@lev_bul]

normal checkbox

[@MaheshPaluri-r9k]

devuduvi sami nuv

[@ilyesonline]