复选框效果 – 有爱前端

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>复选框效果</title> <style type="text/css"> html { box-sizing: border-box; } * { box-sizing: inherit; } *:before, *:after { box-sizing: inherit; } input { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; width: 1px; } body { background-color: #d5d5d5; font-family: sans-serif; font-size: 14px; } .center { left: 50%; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } li { margin-bottom: 14px; } input:checked + label:before { box-shadow: inset 0 0 0 7px black; -webkit-transition: box-shadow 0.2s ease-out; transition: box-shadow 0.2s ease-out; } input:checked:focus + label { text-decoration: underline; } input:checked:focus + label:before { outline: 0; } input:focus + label:before { outline: 1px solid royalblue; } label { padding-left: 20px; position: relative; } label:before { background-color: #fff; box-shadow: inset 0 0 0 0 black; content: ''; display: block; height: 13px; left: 0; overflow: hidden; position: absolute; top: 50%; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); -webkit-transition: box-shadow 0.15s ease-in; transition: box-shadow 0.15s ease-in; width: 13px; } </style> </head> <body> <div class="center"> <ul> <li><input type="checkbox" id="foo" /> <label for="foo">Foo</label> </li> <li><input type="checkbox" id="bar" /> <label for="bar">Bar</label></li> <li><input type="checkbox" id="baz" /> <label for="baz">Baz</label></li> </ul> </div> </body> </html>

提示：你可以先修改部分代码再运行。

sass

body {
    background-color: #d5d5d5;
    font-family: sans-serif;
    font-size: 14px;
}

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

li {
    margin-bottom: 14px;
}

input {
    @include screen-reader-text;
    
    &:checked {
        + label:before {
            box-shadow: inset 0 0 0 7px black;
            transition: box-shadow 0.2s ease-out;            
        }
        
        &:focus + label {
            text-decoration: underline;
            
            &:before {
                outline: 0;
            }
        }
    }
    
    &:focus + label{
        
        &:before {
            outline: 1px solid royalblue;    
        }
    }
}

label {
    padding-left: 20px;
    position: relative;
    
    &:before {
        background-color: #fff;
        box-shadow: inset 0 0 0 0 black;
        content: '';
        display: block;
        height: 13px;
        left: 0;
        overflow: hidden;
        position: absolute;
        top: 50%;
        transform: translate3d(0,-50%,0);
        transition: box-shadow 0.15s ease-in;
        width: 13px;
    }
}

转载请注明：有爱前端 » 复选框效果