1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.     <style type="text/css">
    10.         .label-style {
    11.             margin: 20px 20px 0 0;
    12.             display: inline-block
    13.         }
    15.         .input-radio-style {
    16.             display: none
    17.         }
    18.         .input-checkbox-style {
    19.             display: none
    20.         }
    21.         .input-radio-span-style {
    22.             background-color: #fff;
    23.             border: 1px solid rgba(0, 0, 0, 0.15);
    24.             border-radius: 100%;
    25.             display: inline-block;
    26.             height: 16px;
    27.             margin-right: 10px;
    28.             margin-top: -1px;
    29.             vertical-align: middle;
    30.             width: 16px;
    31.             line-height: 1
    32.         }
    35.         .input-checkbox-span-style {
    36.             background-color: #fff;
    37.             border: 1px solid rgba(0, 0, 0, 0.15);
    38.             border-radius: 0;
    39.             display: inline-block;
    40.             height: 16px;
    41.             margin-right: 10px;
    42.             margin-top: -1px;
    43.             vertical-align: middle;
    44.             width: 16px;
    45.             line-height: 1
    46.         }
    48.         .input-radio-style:checked+.input-radio-span-style:after {
    49.             background-color: #57ad68;
    50.             border-radius: 100%;
    51.             content: "";
    52.             display: inline-block;
    53.             height: 12px;
    54.             margin: 2px;
    55.             width: 12px
    56.         }
    57.         .input-checkbox-style:checked+.input-checkbox-span-style:after {
    58.             background-color: #57ad68;
    59.             border-radius: 0;
    60.             content: "";
    61.             display: inline-block;
    62.             height: 12px;
    63.             margin: 2px;
    64.             width: 12px
    65.         }
    66.     </style>
    67. </head>
    69. <body>
    70.     <div>
    71.         <label class="label-style">
    72.             <input class="input-radio-style" type="radio" name="app">
    73.             <span class="input-radio-span-style"></span>约
    74.         </label>
    75.         <label class="label-style">
    76.             <input class="input-radio-style" type="radio" name="app">
    77.             <span class="input-radio-span-style"></span>不约，叔叔我们不约
    78.         </label>
    79.     </div>
    80.     <div>
    81.         <label class="label-style">
    82.             <input class="input-checkbox-style" type="checkbox">
    83.             <span class="input-checkbox-span-style"></span>苍井空
    84.         </label>
    85.         <label class="label-style">
    86.             <input class="input-checkbox-style" type="checkbox">
    87.             <span class="input-checkbox-span-style"></span>波多野结衣
    88.         </label>
    89.         <label class="label-style">
    90.             <input class="input-checkbox-style" type="checkbox">
    91.             <span class="input-checkbox-span-style"></span>罗玉凤
    92.         </label>
    93.     </div>
    94. </body>
    96. </html>