Question

当我决定将我的checkbox::before元素对准复选框的右边时，我遇到了麻烦。

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>

现在，当我决定在元素未正确对齐之前就将其对齐。

我这样说找到了另一种解决方案

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

但是我想了解为什么right:0不起作用。

谢谢。

将复选框从左向右更改时，checkbox right属性不起作用

0 个答案: