一波CSS的Checkbox复选框样式代码分享

智者创造机会,强者把握机会,弱者坐等机会。才能是来自独创性。独创性是思维观察明白和决定的一种独特的方式。

Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的。为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至可以让它看起来一点也不像复选框。

在本好代码教程中,我们将创建5个不同的选择框,你可以在你的网站上使用它。

查看演示,可以看到我们将要创建的复选框样式。
演示地址

首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观。要做到点需要添加一段代码到你的CSS文件中。

CSS Code复制内容到剪贴板
  1. /**
  2. *隐藏默认的checkbox
  3. */
  4. input[type=checkbox]{
  5. visibility:hidden;
  6. }

隐藏掉所有的Checkbox复选框后,我们需要添加一个label HTML元素,我们都知道,当点击的有for属性的label标签时,对应的Checkbox复选框会被选中。这意味着,我们可以通过label的点击事件来处理我们的Checkbox复选框。

样式一

此复选框风格就像一个解锁滑块,滑块选中和未选中状态会显示在的不同位置。当单击滑块按钮(label标签),将会选中复选框,然后滑块移动到ON位置。

我们开始创建复选框区的HTML。

XML/HTML Code复制内容到剪贴板
  1. <section>
  2. <!--ChecboxOne-->
  3. <h3>CheckboxOne</h3>
  4. <divclass="checkboxOne">
  5. <inputtype="checkbox"value="1"id="checkboxOneInput"name=""/>
  6. <labelfor="checkboxOneInput"></label>
  7. </div>
  8. </section>

因为这个样式的复选框,一个label不足以完成任务,我们用一个DIV元素包含checkbox,我们需要使用它们来做黑色条带和圆角。

CSS Code复制内容到剪贴板
  1. /**
  2. *Createthesliderbar
  3. */
  4. .checkboxOne{
  5. width:40px;
  6. height:10px;
  7. background:#555;
  8. margin:20px80px;
  9. position:relative;
  10. border-radius:3px;
  11. }

现在,我们可以把label作为条带上的滑块,我们希望按钮效果是从条带的一侧移动到另一侧,我们可以添加label的过渡。

CSS Code复制内容到剪贴板
  1. /**
  2. *Createthesliderfromthelabel
  3. */
  4. .checkboxOnelabel{
  5. display:block;
  6. width:16px;
  7. height:16px;
  8. border-radius:50%;
  9. -webkit-transition:all.5sease;
  10. -moz-transition:all.5sease;
  11. -o-transition:all.5sease;
  12. -ms-transition:all.5sease;
  13. transition:all.5sease;
  14. cursor:pointer;
  15. position:absolute;
  16. top:-3px;
  17. left:-3px;
  18. background:#ccc;
  19. }

现在这个滑块在选中(关闭)位置,当我们选中复选框,我们希望有一个反应发生,所以我们可以移动滑块到另一端。我们需要知道,判断复选框被选中,如果是则改变label元素的left属性。

CSS Code复制内容到剪贴板
  1. /**
  2. *Movethesliderinthecorrectpositionifthecheckboxisclicked
  3. */
  4. .checkboxOneinput[type=checkbox]:checked+label{
  5. left:27px;
  6. }

这就是你需要的第一个Checkbox复选框的CSS。

样式二

此复选框风格像样式一样,但不同的是,这个滑块按钮会改变颜色。当您单击滑块按钮,它移动到条带的另一边,并改变按钮的颜色。

HTML代码和样式一是完全一样的。

XML/HTML Code复制内容到剪贴板
  1. <section>
  2. <!--ChecboxTwo-->
  3. <h3>CheckboxTwo</h3>
  4. <divclass="checkboxTwo">
  5. <inputtype="checkbox"value="1"id="checkboxTwoInput"name=""/>
  6. <labelfor="checkboxTwoInput"></label>
  7. </div>
  8. </section>

这个DIV会变成比样式一大一些的条带,label依然是作为滑块,使用下面的CSS来定义它。

CSS Code复制内容到剪贴板
  1. /**
  2. *CheckboxTwo
  3. */
  4. .checkboxTwo{
  5. width:120px;
  6. height:40px;
  7. background:#333;
  8. margin:20px60px;
  9. border-radius:50px;
  10. position:relative;
  11. }

这个样式中间有一个黑色的条,滑块会沿着它左右滑动,但是DIV元素已经使用了,所以我们需要用:before伪类创建一个新的元素。

CSS Code复制内容到剪贴板
  1. /**
  2. *Createthelineforthecircletomoveacross
  3. */
  4. .checkboxTwo:before{
  5. content:'';
  6. position:absolute;
  7. top:19px;
  8. left:14px;
  9. height:2px;
  10. width:90px;
  11. background:#111;
  12. }

和样式一一样,接下来我们为label写CSS样式,把它用作滑块。

CSS Code复制内容到剪贴板
  1. /**
  2. *Createthecircletoclick
  3. */
  4. .checkboxTwolabel{
  5. display:block;
  6. width:22px;
  7. height:22px;
  8. border-radius:50%;
  9. -webkit-transition:all.5sease;
  10. -moz-transition:all.5sease;
  11. -o-transition:all.5sease;
  12. -ms-transition:all.5sease;
  13. transition:all.5sease;
  14. cursor:pointer;
  15. position:absolute;
  16. top:9px;
  17. z-index:1;
  18. left:12px;
  19. background:#ddd;
  20. }

我要实现和样式一差不多的选中状态,当选中时改变label的left和background属性。

CSS Code复制内容到剪贴板
  1. /**
  2. *Createtheclickeventforthecheckbox
  3. */
  4. .checkboxTwoinput[type=checkbox]:checked+label{
  5. left:84px;
  6. background:#26ca28;
  7. }

样式三

这个复选框的样式比样式二更复杂一些,它和前面的例子一样会左右滑动,并且当改变选中和未选中的状态时,滑块滑动到另一侧并且在原位置显示对应的文本。

首先,我们写HTML代码,这和前面是相同的。

XML/HTML Code复制内容到剪贴板
  1. <section>
  2. <!--ChecboxThree-->
  3. <h3>CheckboxThree</h3>
  4. <divclass="checkboxThree">
  5. <inputtype="checkbox"value="1"id="checkboxThreeInput"name=""/>
  6. <labelfor="checkboxThreeInput"></label>
  7. </div>
  8. </section>

然后,我们用相同的方式把div作为滑块,下面的代码会创建一个黑色圆角的条带,我们可以把滑块和文本放到里面。

CSS Code复制内容到剪贴板
  1. /**
  2. *CheckboxThree
  3. */
  4. .checkboxThree{
  5. width:120px;
  6. height:40px;
  7. background:#333;
  8. margin:20px60px;
  9. border-radius:50px;
  10. position:relative;
  11. }

当滑块处于未选中状态时,滑块会在左侧,并且右边显示”OFF”,当点击的时候,滑块移动到右侧,左侧显示”ON”。
但是元素数量不足以让我们实现这些功能,所以我们要用:before和:after两个伪类创建两个元素,分别放置”ON”和”OFF”。

CSS Code复制内容到剪贴板
  1. /**
  2. *CreatethetextfortheOnposition
  3. */
  4. .checkboxThree:before{
  5. content:'On';
  6. position:absolute;
  7. top:12px;
  8. left:13px;
  9. height:2px;
  10. color:#26ca28;
  11. font-size:16px;
  12. }
  13. /**
  14. *Createthelabelfortheoffposition
  15. */
  16. .checkboxThree:after{
  17. content:'Off';
  18. position:absolute;
  19. top:12px;
  20. left:84px;
  21. height:2px;
  22. color:#ddd;
  23. font-size:16px;
  24. }

和前面一样,我们来添加滑块的样式,当被点击时它会移动到另一侧,并且改变颜色。

CSS Code复制内容到剪贴板
  1. /**
  2. *Createthepilltoclick
  3. */
  4. .checkboxThreelabel{
  5. display:block;
  6. width:52px;
  7. height:22px;
  8. border-radius:50px;
  9. -webkit-transition:all.5sease;
  10. -moz-transition:all.5sease;
  11. -o-transition:all.5sease;
  12. -ms-transition:all.5sease;
  13. transition:all.5sease;
  14. cursor:pointer;
  15. position:absolute;
  16. top:9px;
  17. z-index:1;
  18. left:12px;
  19. background:#ddd;
  20. }
  21. /**
  22. *Createthecheckboxeventforthelabel
  23. */
  24. .checkboxThreeinput[type=checkbox]:checked+label{
  25. left:60px;
  26. background:#26ca28;
  27. }

样式四

在这个样式中,我们会创建两个圆形,当点击时改变里面的圆形的颜色表示选中与未选中的状态。
和前面一样的HTML代码。

XML/HTML Code复制内容到剪贴板
  1. <section>
  2. <!--ChecboxFour-->
  3. <h3>CheckboxFour</h3>
  4. <divclass="checkboxFour">
  5. <inputtype="checkbox"value="1"id="checkboxFourInput"name=""/>
  6. <labelfor="checkboxFourInput"></label>
  7. </div>
  8. </section>

接下来我们要为checkbox创建外面的圆形,使用CSS的border-radius属性,并且设置为100%就可以创建一个正圆形。

CSS Code复制内容到剪贴板
  1. <section>
  2. <!--ChecboxFour-->
  3. <h3>CheckboxFour</h3>
  4. <divclass="checkboxFour">
  5. <inputtype="checkbox"value="1"id="checkboxFourInput"name=""/>
  6. <labelfor="checkboxFourInput"></label>
  7. </div>
  8. </section>

然后我们用label元素来创建一个小一点的圆形,它会根据checkbox状态来改变颜色。

CSS Code复制内容到剪贴板
  1. /**
  2. *Createthecheckboxbutton
  3. */
  4. .checkboxFourlabel{
  5. display:block;
  6. width:30px;
  7. height:30px;
  8. border-radius:100px;
  9. -webkit-transition:all.5sease;
  10. -moz-transition:all.5sease;
  11. -o-transition:all.5sease;
  12. -ms-transition:all.5sease;
  13. transition:all.5sease;
  14. cursor:pointer;
  15. position:absolute;
  16. top:5px;
  17. left:5px;
  18. z-index:1;
  19. background:#333;
  20. -webkit-box-shadow:inset0px1px3pxrgba(0,0,0,0.5);
  21. -moz-box-shadow:inset0px1px3pxrgba(0,0,0,0.5);
  22. box-shadow:inset0px1px3pxrgba(0,0,0,0.5);
  23. }

当复选框被选中的时候,我们要改变内圈的背景颜色来表示选中状态。

CSS Code复制内容到剪贴板
  1. /**
  2. *Createthecheckedstate
  3. */
  4. .checkboxFourinput[type=checkbox]:checked+label{
  5. background:#26ca28;
  6. }

样式五

这个复选框的样式有些不同,它看起来只是比浏览器默认的checkbox样式稍微好了些,但是不同的是我们可以根据自己的需要来定义它的样式了。
首先还是一样的HTML代码

XML/HTML Code复制内容到剪贴板
  1. <section>
  2. <!--ChecboxFive-->
  3. <h3>CheckboxFive</h3>
  4. <divclass="checkboxFive">
  5. <inputtype="checkbox"value="1"id="checkboxFiveInput"name=""/>
  6. <labelfor="checkboxFiveInput"></label>
  7. </div>
  8. </section>

在前面的例子中,我们把div作为checkbox的滑动条带或者外部的圆圈,但是这一次我们不需要了,可以使用div元素来设置复选框的区域。

CSS Code复制内容到剪贴板
  1. /**
  2. *CheckboxFive
  3. */
  4. .checkboxFive{
  5. width:25px;
  6. margin:20px100px;
  7. position:relative;
  8. }

label标签用于Click事件和我们要定义的复选框的方框样式。

CSS Code复制内容到剪贴板
  1. /**
  2. *Createtheboxforthecheckbox
  3. */
  4. .checkboxFivelabel{
  5. cursor:pointer;
  6. position:absolute;
  7. width:25px;
  8. height:25px;
  9. top:0;
  10. left:0;
  11. background:#eee;
  12. border:1pxsolid#ddd;
  13. }

接下来,我们要创建方框中的对勾,对于这一点,我们可以使用:after伪类创建一个新的元素,为了实现这个样式,我们可以创建一个5px x 9px的长方形并给他加上边框。这时候我们去掉上面和右边的边框之后,它会看起来像一个字母L。然后我们可以使用CSS的transform属性让它旋转一下,这样看起来就像是一个对勾。

CSS Code复制内容到剪贴板
  1. /**
  2. *Displaythetickinsidethecheckbox
  3. */
  4. .checkboxFivelabel:after{
  5. opacity:0.2;
  6. content:'';
  7. position:absolute;
  8. width:9px;
  9. height:5px;
  10. background:transparent;
  11. top:6px;
  12. left:7px;
  13. border:3pxsolid#333;
  14. border-top:none;
  15. border-right:none;
  16. -webkit-transform:rotate(-45deg);
  17. -moz-transform:rotate(-45deg);
  18. -o-transform:rotate(-45deg);
  19. -ms-transform:rotate(-45deg);
  20. transform:rotate(-45deg);
  21. }

在上面的CSS中,我们已经设置它的透明度为0.2,所以你会看到的复选框有一个半透明的对勾。你可以在悬停的时候加深一点,在选中时,可以把设置为不透明。

CSS Code复制内容到剪贴板
  1. /**
  2. *Createthehovereventofthetick
  3. */
  4. .checkboxFivelabel:hover::after{
  5. opacity:0.5;
  6. }
  7. /**
  8. *Createthecheckboxstateforthetick
  9. */
  10. .checkboxFiveinput[type=checkbox]:checked+label:after{
  11. opacity:1;
  12. }

以上就是一波CSS的Checkbox复选框样式代码分享。无论你身处何境都是自己的选择。更多关于一波CSS的Checkbox复选框样式代码分享请关注haodaima.com其它相关文章!

标签: 一波 复选框