基于css3實現Checkbox復選框美化



59 235 79



特效描述:基于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

加群請備注:從官網了解到

老夫子电子