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

在本教程中,我们将创建5个不同的选择框,你可以在你的网站上使用它。
一波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. <section>  
  2.   <!-- Checbox One -->  
  3.   <h3>Checkbox One</h3>  
  4.    <div class="checkboxOne">  
  5.     <input type="checkbox" value="1" id="checkboxOneInput" name="" />  
  6.     <label for="checkboxOneInput"></label>  
  7.    </div>  
  8. </section>  

因为这个样式的复选框,一个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. <section>  
  2.   <!-- Checbox Two -->  
  3.   <h3>Checkbox Two</h3>  
  4.    <div class="checkboxTwo">  
  5.     <input type="checkbox" value="1" id="checkboxTwoInput" name="" />  
  6.     <label for="checkboxTwoInput"></label>  
  7.    </div>  
  8. </section>  

这个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. <section>  
  2.   <!-- Checbox Three -->  
  3.   <h3>Checkbox Three</h3>  
  4.    <div class="checkboxThree">  
  5.     <input type="checkbox" value="1" id="checkboxThreeInput" name="" />  
  6.     <label for="checkboxThreeInput"></label>  
  7.    </div>  
  8. </section>  

然后,我们用相同的方式把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. <section>  
  2.   <!-- Checbox Four -->  
  3.   <h3>Checkbox Four</h3>  
  4.    <div class="checkboxFour">  
  5.     <input type="checkbox" value="1" id="checkboxFourInput" name="" />  
  6.     <label for="checkboxFourInput"></label>  
  7.    </div>  
  8. </section>  

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

CSS Code复制内容到剪贴板
  1. <section>   
  2.   <!-- Checbox Four -->   
  3.   <h3>Checkbox Four</h3>   
  4.    <div class="checkboxFour">   
  5.     <input type="checkbox" value="1" id="checkboxFourInput" name="" />   
  6.     <label for="checkboxFourInput"></label>   
  7.    </div>   
  8. </section>  

然后我们用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. <section>  
  2.   <!-- Checbox Five -->  
  3.   <h3>Checkbox Five</h3>  
  4.    <div class="checkboxFive">  
  5.     <input type="checkbox" value="1" id="checkboxFiveInput" name="" />  
  6.     <label for="checkboxFiveInput"></label>  
  7.    </div>  
  8. </section>  

在前面的例子中,我们把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. }  
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。