zoukankan      html  css  js  c++  java
  • input 的带有lable的选择样式优化 纯css

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Examples</title>
        <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport"/>
        <meta name="description" content="">
        <meta name="keywords" content="">
        <link href="" rel="stylesheet">
    </head>
    <style>
    
    .checkbox {
        position: relative;
        height: 30px;
    }
    .checkbox input[type='checkbox'] {
        position: absolute;
        left: 0;
        top: 0;
        width: 20px;
        height: 20px;
        opacity: 0;
    }
    .checkbox label {
        position: absolute;
        left: 30px;
        top: 0;
        height: 20px;
        line-height: 20px;
    }
    .checkbox label:before {
        content: '';
        position: absolute;
        left: -30px;
        top: 0;
        width: 20px;
        height: 20px;
        border: 1px solid #ddd;
        border-radius: 50%;
        transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
    }
    
    .checkbox label:after {
        content: '';
        position: absolute;
        left: -22px;
        top: 3px;
        width: 6px;
        height: 12px;
        border: 0;
        border-right: 1px solid #fff;
        border-bottom: 1px solid #fff;
        background: #fff;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
    }
    
    .checkbox input[type='checkbox']:checked + label:before {
        background: #4cd764;
        border-color: #4cd764;
    }
    .checkbox input[type='checkbox']:checked + label:after {
        background: #4cd764;
    }
    </style>
    <body>
    <div class='checkbox'>
        <input type='checkbox' id='checkbox1' name='checkboox[]'>
        <label for='checkbox1'>篮球</label>
    </div>
    <div class='checkbox'>
        <input type='checkbox' id='checkbox2' name='checkboox[]'>
        <label for='checkbox2'>乒乓球</label>
    </div>
    <div class='checkbox'>
        <input type='checkbox' id='checkbox3' name='checkboox[]' checked>
        <label for='checkbox3'>足球</label>
    </div>
    
    </body>
    </html>
  • 相关阅读:
    【转】 cin、cin.get()、cin.getline()、getline()、gets()等函数的用法
    HDU How many prime numbers
    《大学ACM的总结 》(转载)
    POJ 最小公倍数
    HDU 开门人和关门人
    HDU shǎ崽 OrOrOrOrz
    HDU Saving HDU 2111
    HDU 1106 排序
    strtok函数()
    HDU 2187汶川地震
  • 原文地址:https://www.cnblogs.com/ghfjj/p/7954878.html
Copyright © 2011-2022 走看看