Add a new snippet: CSS toggle switch

[daihuaye]

No description provided.

[atomiks]

Another great snippet. Couple suggestions:

• Transition for the knob?
• More aesthetically pleasing color than blue?

Looks great other than that

[daihuaye]

@atomiks Thanks for your comment. It's a good point. I have added transition for label's background color and the knob. And I pick the color #7983ff, if you have any suggestion, please let me know.

[atomiks]

One thing I noticed, and it's extremely subtle, but the knob has tiny 1px jerks as it finishes the transition because it's translating left instead of transform. transform uses subpixels instead of whole pixels which looks better (especially on HiDPI displays) and is more performant to animate.

I think you can do this:

input[type="checkbox"]:checked+.switch::after {
  left: 0;
  transform: translateX(21px);
  /* remove margin-left: -1px */
}

Edit: it also may not be accessible?

.offscreen {
  /* remove display: none; */
  position: absolute;
  left: -9999px;
}

[daihuaye]

@atomiks Thanks! That's good suggestion. I agree that use transform will help animation and is more smooth than use left property. Also yeah, the your change for .offscreen will help accessibility.

One thing is the translateX(21px) will make the knob touch the edge of <label> container, It will look good if there is 1px off, which is the same as start state, right?

[atomiks]

One thing is the translateX(21px) will make the knob touch the edge of container, It will look good if there is 1px off, which is the same as start state, right?

With left: 0, you need 21px, but if we don't set left at all, we only need 20px because of the original left: 1px.

I've made some improvements and I think it's ready now 👍

[daihuaye]

Looks good to me. Thanks!

[skatcat31]

The recent changes make it smoother. nice

[daihuaye]

@atomiks Any more comment? Just wonder when will it merge to master branch if everything looks good?

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for any follow-up tasks.