基于css3实现Checkbox复选框美化



53 211 71



特效描述:基于css3实现 Checkbox 复选框美化效果,基于css3实现Checkbox复选框美化效果

代码结构

1. 引入CSS

<link rel="stylesheet" href="assets/reset.css">

2. 引入JS

<script src="assets/prefixfree.min.js"></script>

3. HTML代码

<h1>9款超炫的 CSS3 复选框(Checkbox) </h1>
<div class="ondisplay">
  <section title=".slideOne"> 
    <!-- .slideOne -->
    <div class="slideOne">
      <input type="checkbox" value="None" id="slideOne" name="check" checked />
      <label for="slideOne"></label>
    </div>
    <!-- end .slideOne --> 
  </section>
  <section title=".slideTwo"> 
    <!-- .slideTwo -->
    <div class="slideTwo">
      <input type="checkbox" value="None" id="slideTwo" name="check" checked />
      <label for="slideTwo"></label>
    </div>
    <!-- end .slideTwo --> 
  </section>
  <section title=".slideThree"> 
    <!-- .slideThree -->
    <div class="slideThree">
      <input type="checkbox" value="None" id="slideThree" name="check" checked />
      <label for="slideThree"></label>
    </div>
    <!-- end .slideThree --> 
  </section>
  <section title=".roundedOne"> 
    <!-- .roundedOne -->
    <div class="roundedOne">
      <input type="checkbox" value="None" id="roundedOne" name="check" checked />
      <label for="roundedOne"></label>
    </div>
    <!-- end .roundedOne --> 
  </section>
  <BR/><BR/><BR/>
  <section title=".roundedTwo"> 
    <!-- .roundedTwo -->
    <div class="roundedTwo">
      <input type="checkbox" value="None" id="roundedTwo" name="check" checked />
      <label for="roundedTwo"></label>
    </div>
    <!-- end .roundedTwo --> 
  </section>
  <section title=".squaredOne"> 
    <!-- .squaredOne -->
    <div class="squaredOne">
      <input type="checkbox" value="None" id="squaredOne" name="check" checked />
      <label for="squaredOne"></label>
    </div>
    <!-- end .squaredOne --> 
  </section>
  <section title=".squaredTwo"> 
    <!-- .squaredTwo -->
    <div class="squaredTwo">
      <input type="checkbox" value="None" id="squaredTwo" name="check" checked />
      <label for="squaredTwo"></label>
    </div>
    <!-- end .squaredTwo --> 
  </section>
  <section title=".squaredThree"> 
    <!-- .squaredThree -->
    <div class="squaredThree">
      <input type="checkbox" value="None" id="squaredThree" name="check" checked />
      <label for="squaredThree"></label>
    </div>
    <!-- end .squaredThree --> 
  </section>
  <section title=".squaredFour"> 
    <!-- .squaredFour -->
    <div class="squaredFour">
      <input type="checkbox" value="None" id="squaredFour" name="check" checked />
      <label for="squaredFour"></label>
    </div>
    <!-- end .squaredFour --> 
  </section>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 切换按钮 表单 表单美化 表单插件 表单美化插件 复选框 复选按钮 复选框美化 切换按钮

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到