人靠衣装,机靠壳装

CSS3复选框美化特效代码

2018-08-11 10:53 发布

00
admin
湖南省 长沙市
  • 粉丝4

  • 关注1

  • 动态2

CSS3复选框美化特效代码.jpg


通过HTML来构建复选框,并通过js和css3代码来执行复选框的勾选和取消动画效果


在页面中引入style.css文件

<link rel="stylesheet" type="text/css" href="assets/css/style.css" />


HTML结构

复选框的HTML结构如下:

<div class="input input--checkbox input--large">
  <label>
    <input type="checkbox" checked>
    <span class="input__box"></span>
    <span>large</span>
  </label>
</div>
<div class="input input--checkbox input--primary">
  <label>
    <input type="checkbox" checked disabled>
    <span class="input__box"></span>
    <span>disabled</span>
  </label>
</div>
<div class="input input--checkbox input--primary">
  <label>
    <input type="checkbox" checked>
    <span class="input__box"></span>
    <span>primary</span>
  </label>
</div>


授权方式:共享版

适合环境: Chrome/Firefox/Opera/Safari/IE9+

官方网站: 相关链接

在线演示

0
猜你喜欢
更多发现
子导航JS代码