DEV Community

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

View post
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
 
karandeveloper profile image
Karan Developer •

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
 
karandeveloper profile image
Karan Developer • • Edited

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