[Html/CSS] HTML的checkbox和radio样式美化的简单实例

<style type="text/css">  
    input[type="checkbox"]   
    {   
      display: none;   
    }   
    
      input[type="checkbox"] + label   
      {   
        display: inline-block;   
        position: relative;   
        border: solid 2px #99a1a7;   
        width: 35px;   
        height: 35px;   
        line-height: 35px;   
        border-radius: 4px;   
      }   
    
      input[type="checkbox"]:checked + label:after   
      {   
        content: '\2714';   
        font-size: 25px;   
        color: #99a1a7;   
        width: 35px;   
        height: 35px;   
        line-height: 35px;   
        position: absolute;   
        text-align: center;   
        background-color: #e9ecee;   
      }   
    
    .tab   
    {   
      margin-top: 20px;   
      margin-bottom: 20px;   
      width: 100%;   
    }   
    
      .tab td   
      {   
        border: solid 1px #f99;   
        font-size: 25px;   
        line-height: 39px;   
      }   
  </style>  
    
  <table class="tab" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">  
    <tr>  
      <td>  
        <div align="center" style="float: left; height: 39px; width: 39px;">  
          <input id="ck101" type="checkbox" />  
          <label for="ck101"></label>  
        </div>  
        <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">  
          测试101   
        </div>  
        <div align="center" style="float: left; height: 39px; width: 39px;">  
          <input id="ck102" type="checkbox" />  
          <label for="ck102"></label>  
        </div>  
        <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">  
          测试102   
        </div>  
        测试   
      </td>  
      <td></td>  
    </tr>  
    <tr>  
      <td style="text-align: center;">  
        <div style="display: inline-block;">  
          <div align="center" style="float: left; height: 39px; width: 39px;">  
            <input id="ck103" type="checkbox" />  
            <label for="ck103"></label>  
          </div>  
          <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">  
            测试103   
          </div>  
          <div align="center" style="float: left; height: 39px; width: 39px;">  
            <input id="ck104" type="checkbox" />  
            <label for="ck104"></label>  
          </div>  
          <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">  
            测试104   
          </div>  
          测试   
        </div>  
      </td>  
      <td>测试   
      </td>  
    </tr>  
  </table>  
    
  <div style="border: solid 1px #f99; height: 39px; margin-top: 20px; margin-bottom: 20px;">  
    <div align="center" style="float: left; height: 39px; width: 39px;">  
      <input id="ck201" type="checkbox" />  
      <label for="ck201"></label>  
    </div>  
    <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">  
      测试201   
    </div>  
    <div align="center" style="float: left; height: 39px; width: 39px;">  
      <input id="ck202" type="checkbox" />  
      <label for="ck202"></label>  
    </div>  
    <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px;">  
      测试202   
    </div>  
  </div>

<style type="text/css">  
    input[type="radio"]   
    {   
      display: none;   
    }   
    
      input[type="radio"] + label   
      {   
        display: inline-block;   
        position: relative;   
        border: solid 2px #99a1a7;   
        width: 25px;   
        height: 25px;   
        line-height: 25px;   
        padding: 5px;   
        border-radius: 19.5px;   
      }   
    
      input[type="radio"]:checked + label:after   
      {   
        content: ' ';   
        font-size: 25px;   
        color: #99a1a7;   
        width: 25px;   
        height: 25px;   
        line-height: 25px;   
        position: absolute;   
        text-align: center;   
        background-color: #99a1a7;   
        border-radius: 12.5px;   
      }   
    
      input[type="radio"]:checked + label   
      {   
        background-color: #e9ecee;   
      }   
    
    .tab   
    {   
      margin-top: 20px;   
      margin-bottom: 20px;   
      width: 100%;   
    }   
    
      .tab td   
      {   
        border: solid 1px #f99;   
        font-size: 25px;   
        line-height: 39px;   
      }   
  </style>  
    
  <table class="tab" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">  
    <tr>  
      <td>  
        <div align="center" style="float: left; height: 39px; width: 39px;">  
          <input id="rd101" name="rd" type="radio" />  
          <label for="rd101"></label>  
        </div>  
        <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">  
          测试101   
        </div>  
        <div align="center" style="float: left; height: 39px; width: 39px;">  
          <input id="rd102" name="rd" type="radio" />  
          <label for="rd102"></label>  
        </div>  
        <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">  
          测试102   
        </div>  
        测试   
      </td>  
      <td></td>  
    </tr>  
    <tr>  
      <td style="text-align: center;">  
        <div style="display: inline-block;">  
          <div align="center" style="float: left; height: 39px; width: 39px;">  
            <input id="rd103" name="rd" type="radio" />  
            <label for="rd103"></label>  
          </div>  
          <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">  
            测试103   
          </div>  
          <div align="center" style="float: left; height: 39px; width: 39px;">  
            <input id="rd104" name="rd" type="radio" />  
            <label for="rd104"></label>  
          </div>  
          <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">  
            测试104   
          </div>  
          测试   
        </div>  
      </td>  
      <td>测试   
      </td>  
    </tr>  
  </table>  
    
  <div style="border: solid 1px #f99; height: 39px; margin-top: 20px; margin-bottom: 20px;">  
    <div align="center" style="float: left; height: 39px; width: 39px;">  
      <input id="rd201" name="rd" type="radio" />  
      <label for="rd201"></label>  
    </div>  
    <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">  
      测试201   
    </div>  
    <div align="center" style="float: left; height: 39px; width: 39px;">  
      <input id="rd202" name="rd" type="radio" />  
      <label for="rd202"></label>  
    </div>  
    <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px;">  
      测试202   
    </div>  
  </div>