四川盐亭网站制作公司

CSS中如何使用Checkbox复选框样式

这期内容当中小编将会给大家带来有关CSS中如何使用Checkbox复选框样式，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

在井研等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供网站制作、网站建设 网站设计制作按需网站设计,公司网站建设,企业网站建设,品牌网站制作,营销型网站,成都外贸网站制作,井研网站建设费用合理。

首先，需要添加一段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复选框。

样式一
CSS中如何使用Checkbox复选框样式

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

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

XML/HTML Code复制内容到剪贴板

  1.   

  2.     

  3.   

    Checkbox One

      

  4.      

  5.       

  6.       

  7.    

  

  •   

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

    CSS Code复制内容到剪贴板

    1. /** 

    2.  * Create the slider bar 

    3.  */  

    4. .checkboxOne {   

    5.  width: 40px;   

    6.  height: 10px;   

    7.  background: #555;   

    8.  margin: 20px 80px;   

    9.  position: relative;   

    10.  border-radius: 3px;   

    11. }  

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

    CSS Code复制内容到剪贴板

    1. /** 

    2.  * Create the slider from the label 

    3.  */  

    4. .checkboxOne label {   

    5.  display: block;   

    6.  width: 16px;   

    7.  height: 16px;   

    8.  border-radius: 50%;   

    9.     

    10.  -webkit-transition: all .5s ease;   

    11.  -moz-transition: all .5s ease;   

    12.  -o-transition: all .5s ease;   

    13.  -ms-transition: all .5s ease;   

    14.  transition: all .5s ease;   

    15.  cursor: pointer;   

    16.  position: absolute;   

    17.  top: -3px;   

    18.  left: -3px;   

    19.     

    20.  background: #ccc;   

    21. }  

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

    CSS Code复制内容到剪贴板

    1. /** 

    2.  * Move the slider in the correct position if the checkbox is clicked 

    3.  */  

    4. .checkboxOne input[type=checkbox]:checked + label {   

    5.  left: 27px;   

    6. }  

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

    样式二
    CSS中如何使用Checkbox复选框样式

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

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

    XML/HTML Code复制内容到剪贴板

    1.   

    2.     

    3.   

      Checkbox Two

        

    4.      

    5.       

    6.       

    7.    

      

  •   

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

    CSS Code复制内容到剪贴板

    1. /** 

    2.  * Checkbox Two 

    3.  */  

    4. .checkboxTwo {   

    5.  width: 120px;   

    6.  height: 40px;   

    7.  background: #333;   

    8.  margin: 20px 60px;   

    9.     

    10.  border-radius: 50px;   

    11.  position: relative;   

    12. }  

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

    CSS Code复制内容到剪贴板

    1. /** 

    2.  * Create the line for the circle to move across 

    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.  * Create the circle to click 

    3.  */  

    4. .checkboxTwo label {   

    5.  display: block;   

    6.  width: 22px;   

    7.  height: 22px;   

    8.  border-radius: 50%;   

    9.     

    10.  -webkit-transition: all .5s ease;   

    11.  -moz-transition: all .5s ease;   

    12.  -o-transition: all .5s ease;   

    13.  -ms-transition: all .5s ease;   

    14.  transition: all .5s ease;   

    15.  cursor: pointer;   

    16.  position: absolute;   

    17.  top: 9px;   

    18.  z-index: 1;   

    19.  left: 12px;   

    20.  background: #ddd;   

    21. }  

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

    CSS Code复制内容到剪贴板

    1. /** 

    2.  * Create the click event for the checkbox 

    3.  */  

    4. .checkboxTwo input[type=checkbox]:checked + label {   

    5.  left: 84px;   

    6.  background: #26ca28;   

    7. }  

    样式三
    CSS中如何使用Checkbox复选框样式

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

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

    XML/HTML Code复制内容到剪贴板

    1.   

    2.     

    3.   

      Checkbox Three

        

    4.      

    5.       

    6.       

    7.    

      

  •   

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

    CSS Code复制内容到剪贴板

    1. /** 

    2.  * Checkbox Three 

    3.  */  

    4. .checkboxThree {   

    5.  width: 120px;   

    6.  height: 40px;   

    7.  background: #333;   

    8.  margin: 20px 60px;   

    9.     

    10.  border-radius: 50px;   

    11.  position: relative;   

    12. }  

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

    CSS Code复制内容到剪贴板

    1. /** 

    2.  * Create the text for the On position 

    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.  * Create the label for the off position 

    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.  * Create the pill to click 

    3.  */  

    4. .checkboxThree label {   

    5.  display: block;   

    6.  width: 52px;   

    7.  height: 22px;   

    8.  border-radius: 50px;   

    9.     

    10.  -webkit-transition: all .5s ease;   

    11.  -moz-transition: all .5s ease;   

    12.  -o-transition: all .5s ease;   

    13.  -ms-transition: all .5s ease;   

    14.  transition: all .5s ease;   

    15.  cursor: pointer;   

    16.  position: absolute;   

    17.  top: 9px;   

    18.  z-index: 1;   

    19.  left: 12px;   

    20.  background: #ddd;   

    21. }   

    22.     

    23. /** 

    24.  * Create the checkbox event for the label 

    25.  */  

    26. .checkboxThree input[type=checkbox]:checked + label {   

    27.  left: 60px;   

    28.  background: #26ca28;   

    29. }  

    样式四
    CSS中如何使用Checkbox复选框样式

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

    XML/HTML Code复制内容到剪贴板

    1.   

    2.     

    3.   

      Checkbox Four

        

    4.      

    5.       

    6.       

    7.    

      

  •   

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

    CSS Code复制内容到剪贴板

    1.   

    2.      

    3.   

      Checkbox Four

        

    4.       

    5.        

    6.        

    7.       

    8.   

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

    CSS Code复制内容到剪贴板

    1. /** 

    2.  * Create the checkbox button 

    3.  */  

    4. .checkboxFour label {   

    5.  display: block;   

    6.  width: 30px;   

    7.  height: 30px;   

    8.  border-radius: 100px;   

    9.     

    10.  -webkit-transition: all .5s ease;   

    11.  -moz-transition: all .5s ease;   

    12.  -o-transition: all .5s ease;   

    13.  -ms-transition: all .5s ease;   

    14.  transition: all .5s ease;   

    15.  cursor: pointer;   

    16.  position: absolute;   

    17.  top: 5px;   

    18.  left: 5px;   

    19.  z-index: 1;   

    20.     

    21.  background: #333;   

    22.     

    23.  -webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);   

    24.  -moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);   

    25.  box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);   

    26. }  

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

    CSS Code复制内容到剪贴板

    1. /** 

    2.  * Create the checked state 

    3.  */  

    4. .checkboxFour input[type=checkbox]:checked + label {   

    5.  background: #26ca28;   

    6. }  

    样式五
    CSS中如何使用Checkbox复选框样式

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

    XML/HTML Code复制内容到剪贴板

    1.   

    2.     

    3.   

      Checkbox Five

        

    4.      

    5.       

    6.       

    7.      

    8.   

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

    CSS Code复制内容到剪贴板

    1. /** 

    2.  * Checkbox Five 

    3.  */  

    4. .checkboxFive {   

    5.  width: 25px;   

    6.  margin: 20px 100px;   

    7.  position: relative;   

    8. }  

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

    CSS Code复制内容到剪贴板

    1. /** 

    2.  * Create the box for the checkbox 

    3.  */  

    4. .checkboxFive label {   

    5.  cursor: pointer;   

    6.  position: absolute;   

    7.  width: 25px;   

    8.  height: 25px;   

    9.  top: 0;   

    10.    left: 0;   

    11.  background: #eee;   

    12.  border:1px solid #ddd;   

    13. }  

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

    CSS Code复制内容到剪贴板

    1. /** 

    2.  * Display the tick inside the checkbox 

    3.  */  

    4. .checkboxFive label: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: 3px solid #333;   

    14.  border-top: none;   

    15.  border-right: none;   

    16.     

    17.  -webkit-transform: rotate(-45deg);   

    18.  -moz-transform: rotate(-45deg);   

    19.  -o-transform: rotate(-45deg);   

    20.  -ms-transform: rotate(-45deg);   

    21.  transform: rotate(-45deg);   

    22. }  

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

    CSS Code复制内容到剪贴板

    1. /** 

    2.  * Create the hover event of the tick 

    3.  */  

    4. .checkboxFive label:hover::after {   

    5.  opacity: 0.5;   

    6. }   

    7.     

    8. /** 

    9.  * Create the checkbox state for the tick 

    10.  */  

    11. .checkboxFive input[type=checkbox]:checked + label:after {   

    12.  opacity: 1;   

    13. }  

    上述就是小编为大家分享的CSS中如何使用Checkbox复选框样式了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。


    分享名称：CSS中如何使用Checkbox复选框样式
    新闻来源：http://scyanting.com/article/joesjh.html

    其他资讯