您现在的位置是：网站首页> 编程资料编程资料

一款纯css3实现简单的checkbox复选框和radio单选框利用纯CSS自定义Checkbox和Radio的样式示例代码纯css3实现效果超级炫的checkbox复选框和radio单选框CSS3实例分享--超炫checkbox复选框和radio单选框css3和jquery实现自定义checkbox和radiobox组件CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checked

2021-09-06 923人已围观

简介 这篇文章主要为大家介绍了利用纯css3实现一款简单实用的checkbox复选框和radio单选框，代码简单易懂，可以直接复制，感兴趣的可以进来看看哦

　　昨天为大家分享了一款很炫的checkbox复选框和radio单选框，今天再给大家带来一款简单实用的checkbox复选框和radio单选框。界面清淅、舒服。先给大家来张效果图：

　　实现代码：

　　html代码：

XML/HTML Code复制内容到剪贴板
  1. <div class="frame">  
  2.         <input checked="checked" id="radio_1" name="radio" type="radio">  
  3.         <label class="radio" for="radio_1">  
  4.             <i class="fa fa-times">i>  
  5.         label>  
  6.         <input id="radio_2" name="radio" type="radio">  
  7.         <label class="radio" for="radio_2">  
  8.             <i class="fa fa-times">i>  
  9.         label>  
  10.         <input id="radio_3" name="radio" type="radio">  
  11.         <label class="radio" for="radio_3">  
  12.             <i class="fa fa-times">i>  
  13.         label>  
  14.         <input id="radio_4" name="radio" type="radio">  
  15.         <label class="radio" for="radio_4">  
  16.             <i class="fa fa-times">i>  
  17.         label>  
  18.         <input id="radio_5" name="radio" type="radio">  
  19.         <label class="radio" for="radio_5">  
  20.             <i class="fa fa-times">i>  
  21.         label>  
  22.     div>  
  23.     <div class="frame">  
  24.         <input checked="checked" id="check_1" name="check" type="checkbox">  
  25.         <label class="check" for="check_1">  
  26.             <i class="fa fa-check">i>  
  27.         label>  
  28.         <input id="check_2" name="check" type="checkbox">  
  29.         <label class="check" for="check_2">  
  30.             <i class="fa fa-check">i>  
  31.         label>  
  32.         <input id="check_3" name="check" type="checkbox">  
  33.         <label class="check" for="check_3">  
  34.             <i class="fa fa-check">i>  
  35.         label>  
  36.         <input id="check_4" name="check" type="checkbox">  
  37.         <label class="check" for="check_4">  
  38.             <i class="fa fa-check">i>  
  39.         label>  
  40.         <input id="check_5" name="check" type="checkbox">  
  41.         <label 

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网