I am really proud of a css switch I made by using only one checkbox. My cousin has been a webdev for 8 years and I for about 5 months, and he said that it looks pretty cool. Codepen in the comments.

  • 6
  • 15
    *<br />
  • 13
    @savethecode that's only necessary if writing XHTML.
    The browser parser will recognize it just fine without the ending tag.
    This also the standard br tag for html5
  • 5
    @phiter why even use XHTML?
  • 3
    @inukinator I don't think it's still used by anyone.
  • 8
    Great job. I'd remove the br's and just space them with CSS. But that's just me
  • 4
    @devrocket I did use a margin in the actual project I used it on, I left it. marginless in this pen so people could set their own easily if they wanted to use it.
  • 10
    @Letmecode Let's start a revolution,
    and make websites look like shit on every browser that's not chrome/google ultron.
  • 2
    @BambuSource omg google ultron 😂
  • 2
    Since when do input elements support pseudo selectors? 😮 cool!
  • 3
    Radio and checkbox inputs support pseudo elements on chrome and safari probably on Firefox too.
    I made it using labels before but I wanted to use less html for the expected result xD
    I tought pseudo selectors worked on all modern browsers. I don't expect them to work on IE though.
  • 1
    @BambuSource Wait you weren't already doing that? 😉
  • 3
    @devrocket It's a freaking demo. You guys are all arguing over the <br>'s and that's not even the point of what he's trying to show.
  • 2
    @devios1 thanks boi
  • 3
    @devios1 it wasn't a jab at him. He's been at it for 5 month's so I thought I could share advice from dev to dev. I don't think he was offended. He explained why he did it that way afterwards so I assume he understood what I meant.
  • 1
    Nice work
  • 4
    @devrocket please don't ever stop sharing knowledge. I did not get offended. Knowledge should never offend, only add to someone's life.
  • 2
    That looks really nice. I might steal this sometime.
  • 3
    @rm-rf-star feel free to do so xD
  • 1
    Good code !
  • 1
    @SoulSkrix I'll try to explain a bit:

    1. First, I have a checkbox. This checkbox cannot be customized directly, only a few bits. I need to hide this checkbox.

    2. Then I use visibility: hidden on the checkbox so it doesn't show anymore. display: none wouldn't work because the pseudo selectors wouldn't appear.

    3. I create the pseudo selectors :before and :after, and add visibility: true to them.

    4. Now I have two visible selectors. I customize the :before selector to be the slider track, you know the gray thing below the circle. The :after selector is the thumb (the circle). I needed those two elements because there are two components of the slider.

    5. I had to use a lot of positioning shit for the thumb to be inside the track, that's why the checkbox must be position: relative, so the pseudo selectors can be absolutely positioned inside it.

    6. I use the :checked pseudo class to verify if the checkbox is checked, and customize the pseudo elements according to it.
  • 1
    7. I achieved the "slide" effect by using the transition property so it changes both the background color of the track and the position of the thumb with a animation.
  • 0
  • 1
    i might use that :D i need one asap
Add Comment