首页 专题 H5案例 前端导航 UI框架

纯css3开发的checkbox、radio和switch

作者:TG 日期: 2016-09-26 阅读: 794
随着CSS3的出现,我们可以自由的去美化radio和checkbox。当然,如果你嫌自己开发麻烦,网上已经有很多比较完善的表单插件,比如:iCheck

在这篇文章,并不是介绍某个插件,主要是分享一下实现纯css3开发的checkbox、radio和switch的思路。

先看例子:


上面的radio、checkbox和switch是不是比默认的好看多了,其实,三种的设计思路和布局基本是一样的:

布局:用label将input和div包裹,利用label的 for 属性和 input 的id关联起来。
样式:将input设置为 display:none ,利用 :checked 选择器来变换选择和未选择的样式。

选择框里的勾是利用阿里巴巴的字体图标。

//radio

<label for="radio3" class="tg-icheck-radio tg-icheck-flat-radio">   

  <input type="radio" id="radio3" name="sex1" checked>   

  <div class="tg-icheck-media"></div>   

  <div class="tg-icheck-inner">   

    <div class="tg-icheck-title">男</div>   

  </div>   

</label>


//checkbox

<label for="checkbox1" class="tg-icheck-checkbox">   

  <input type="checkbox" id="checkbox1" checked>   

  <div class="tg-icheck-media"></div>   

  <div class="tg-icheck-inner">   

    <div class="tg-icheck-title">篮球</div>   

  </div>   

</label>


//switch

<label class="tg-switch tg-switch-3" for="switch1">   

  <input type="checkbox" id="switch1">   

  <div class="tg-switch-media">   

    <span class="switch-label"></span>   

  </div>   

  <div class="tg-switch-inner">switch1</div> </label>


radio选择时的样式:

.tg-icheck-radio > input:checked + .tg-icheck-media {   

  border-color: #009a61;   

  background: #009a61;  

}


注意:当你定义radio时,一定要定义name属性


总结

美化radio和checkbox的方式有很多种,只要知道了原理,你就可以实现属于你自己的独特风格页面。



关注”全栈技术杂货铺“

全栈技术杂货铺