0

I have trouble when ı decide to align my checkbox::before element to the right of the checkbox.

body{
    margin: 0;
    padding: 0;
}

.center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

input[type="checkbox"]{
    position: relative;
    -webkit-appearance:none;
    width: 200px;
    height: 100px;
    background: red;
    border-radius: 50px;
    transition: .6s;
    outline: none;
    border: none;
    box-shadow: 0 0 10px 3px rgba(255,21,21,0.7);
}

input[type="checkbox"]:checked{
    background: blue;
     box-shadow: 0 0 10px 3px rgba(21,21,255,0.7);
}

input[type="checkbox"]::before{
    content: '';
    position: absolute;
    width: 100px;
    height: 100%;
    background: white;
    border-radius: 50%;
    top: 0;
    left: 0;
    transition: .6s;
    display: inline-block;
}

input[type="checkbox"]:checked::before{
    right: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> Title </title>
    <link rel="stylesheet" type="text/css" href="animatedcheckbox.css">
</head>
<body>
    <div class="center">
        <input type="checkbox">
    </div>
</body>
</html>

Now, When I decide to align it right before element doesn't align the right.

I found an alternative solution for this by saying that 

input[type="checkbox"]:checked::before{
    left: calc(100% - 100px);
}

but I want to learn why right:0 doesn't work.

Thanks in advance.

Turnip
  • 35,836
  • 15
  • 89
  • 111
Süleyman Acar
  • 57
  • 1
  • 8
  • even if it works it's not correct to use pseudo element with input element. It won't behave the same cross browser (in some browser it won't even work) – Temani Afif Aug 15 '18 at 09:52
  • in this case right:0 doesn't work because you have also left:0 .. you need to set left:auto – Temani Afif Aug 15 '18 at 09:54

0 Answers0