css3实现多选

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
        <style>
            input{
      
                display: none;
            }
            label{
      
                display: inline-block;
                width: 10px;
                height: 10px;
                border: 1px solid #ccc;
                position: relative;
            }
            input:checked+label{
      
                border-color: #888;
            }
            input:checked+label:before{
      
                content: '';
                display: inline-block;
                width: 2px;
                height: 6px;
                background: #000;
                transform: rotate(-30deg);
                position: absolute;
                top: 4px;
                left: 0;
            }
            input:checked+label:after{
      
                content: '';
                display: inline-block;
                width: 2px;
                height: 10px;
                background: #000;
                transform: rotate(30deg);
                position: absolute;
                top: 1px;
                left: 3px;
            }
        style>
    head>
    <body>
        <input id="food_c" type="checkbox" name="food" />
        <label for="food_c">label>川菜
        <input id="food_x" type="checkbox" name="food" />
        <label for="food_x">label>湘菜
        <input id="food_s" type="checkbox" name="food" />
        <label for="food_s">label>苏菜
        <input id="food_z" type="checkbox" name="food" />
        <label for="food_z">label>浙菜
    body>
html>

 

转载于:https://www.cnblogs.com/gxywb/p/10318321.html

你可能感兴趣的:(css3实现多选)