“This is the 17th day of my participation in the November Gwen Challenge. See details of the event: The last Gwen Challenge 2021”.

Past links:

“CSS Selector”

“CSS Selector (2)”

“CSS Selector (3)”

“CSS Selector (4)”

preface

Yesterday we actually implemented a mouse swipe with the hover select to show the effect of Tips. If you have seen it, you should have a new understanding of CSS. Today we’ll introduce another selector, : checked.

: checked

: Checked: The status of the selected options in the form node, used to simulate mouse click events when type is set to radio and checkbox.

implementation

The implementation is not too difficult, mainly through the: Checked selector control button position, and the background color.

  • When clicked, “Checked” will be triggered. At this time, you can do some operations of your own, such as button sliding, dynamic effect, background color and so on.

  • When you click on it again, you cancel checked, and that goes to your default style, and the default style can also be customized, like a switch off, or you can add text, and I won’t go into that here.

The code is as follows:

// HTML
<input class="input-switch" type="checkbox">
Copy the code
// CSS .com { width: 102px; height: 62px; border-radius: 31px; background-color: red; } .input-switch { position: relative; margin: 200px; appearance: none; cursor: pointer; transition: all 100ms; @extend .com; &::before { position: absolute; content: ""; transition: all 300ms cubic-bezier(.45, 1, .4, 1); @extend .com; } &::after { position: absolute; left: 4px; top: 4px; width: 54px; height: 54px; border-radius: 50%; background-color: #fff; box-shadow: 1px 1px 5px rgba(#000, .3); content: ""; Transition: all 300ms Cubic - Bezier (.4,.4,.25, 1.35); } &:checked { background-color: #5eb662; &::before { transform: scale(0); } &::after { transform: translateX(40px); }}}Copy the code

Well, that’s all for today. I’m going to eat something delicious later. I have to run. You are still the best today. Come on, come on, you’re the best! Come on, come on, you’re the best! Oh huo, Bye Bye!!