DEV Community

Discussion on: How to create a custom Toggle Switch using CSS

Collapse
jlopcun profile image
jlop

I don't know why but my label doesnt appear , and after trying my self i copied the code and it still not working ,i dont know why

Collapse
karankumar_js profile image
Karan Kumar Author

Please share me your Codepen Pen link, I'll definitely look into it !

Collapse
jlopcun profile image
jlop

codepen.io/jlopy/pen/KKmeYBK

The css of the label is a copy paste of yours , I only did the firsts steps because its not working , thank you for be helpful

Thread Thread
karankumar_js profile image
Karan Kumar Author • Edited on

First of all, Thankyou for encountering this problem!

Reason
The main difference between your and my code is of Display property. Default property is display:inline;

But I've used flexbox to make my button center to body, In this case body is flex-container and my <label> is flex-item and default display property of flex-items are display:block. And in your case <label> is display: inline;

Solution
Just add display:block in <label>

# Reference code is given below
label {
    display: block;  /* Add this line */
    width: 500px;
    height: 150px;
    background-color: #477a85;
    border-radius: 100px;
    position: relative;
    cursor: pointer;
    transition: 0.5s;
    box-shadow: 0 0 20px #477a8550;
  }
Enter fullscreen mode Exit fullscreen mode

I've also updated my code, Please let me know if you still having any problem.

Thread Thread
jlopcun profile image
jlop

My problem is solved , I didn't think that this was the problem , thank you so much