首页>>表单>>方框显示勾选样式的单选与复选按钮(2020-06-29)

方框显示勾选样式的单选与复选按钮

 单选框用方框显示，本例

方框显示勾选样式的单选与复选按钮
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div style="border:5px solid red;">  
  2.         <p>第一组单选</p>  
  3.         <div class="checkbox-group">  
  4.             <input type="radio" id="one" name="dan"/>  
  5.             <label for="one">记住密码</label>  
  6.         </div>  
  7.         <div class="checkbox-group">  
  8.             <input type="radio" id="two" name="dan"/>  
  9.             <label for="two">记住密码</label>  
  10.         </div>  
  11.         <div class="checkbox-group">  
  12.             <input type="radio" id="three" name="dan"/>  
  13.             <label for="three">记住密码</label>  
  14.         </div>  
  15.         <p>第二组单选</p>  
  16.         <div class="checkbox-group">  
  17.             <input type="radio" id="one2" name="dan2"/>  
  18.             <label for="one2">记住密码</label>  
  19.         </div>  
  20.         <div class="checkbox-group">  
  21.             <input type="radio" id="two2" name="dan2"/>  
  22.             <label for="two2">记住密码</label>  
  23.         </div>  
  24.         <div class="checkbox-group">  
  25.             <input type="radio" id="three2" name="dan2"/>  
  26.             <label for="three2">记住密码</label>  
  27.         </div>  
  28.         <p>第一组复选</p>  
  29.         <div class="checkbox-group">  
  30.             <input type="checkbox" id="one3" name="fu"/>  
  31.             <label for="one3">记住密码</label>  
  32.         </div>  
  33.         <div class="checkbox-group">  
  34.             <input type="checkbox" id="two3" name="fu"/>  
  35.             <label for="two3">记住密码</label>  
  36.         </div>  
  37.         <div class="checkbox-group">  
  38.             <input type="checkbox" id="three3" name="fu"/>  
  39.             <label for="three3">记住密码</label>  
  40.         </div>  
  41.         <p>第二组复选</p>  
  42.         <div class="checkbox-group">  
  43.             <input type="checkbox" id="one4" name="fu2"/>  
  44.             <label for="one4">记住密码</label>  
  45.         </div>  
  46.         <div class="checkbox-group">  
  47.             <input type="checkbox" id="two4" name="fu2"/>  
  48.             <label for="two4">记住密码</label>  
  49.         </div>  
  50.         <div class="checkbox-group">  
  51.             <input type="checkbox" id="three4" name="fu2"/>  
  52.             <label for="three4">记住密码</label>  
  53.         </div>  
  54.     </div>  

 


原文地址:http://www.freejs.net/article_biaodan_876.html