使用CSS和放大器创建自定义复选框引导 [英] Creating a custom checkbox with CSS & Bootstrap

问题描述

我使用引导框架具有以下标记。

 < div class =col-md-4 > 
< div class =custom-container> 
< img class =center-block img-responsive img-circle invite-contact-trybesrc ={$ img}alt =联系人图片> 
< input class =invite-contact-checkboxtype =checkbox> 
< / div> 
< / div> 
  

我想达到以下效果：

是否还有这使用CSS？

我显然需要3个州：

初始：

  .custom-container input [type = checkbox] {} 
  

某种形式的悬停状态：

  .custom-container input [type = checkbox]：hover {} 
  

检查时：

  .custom-container input [type = checkbox]：checked {} 
  

任何人都可以建议解决方案？

解决方案

背景图片复选框更换

让我们创建

这是一个非常简单的例子，使用 ：before 伪元素以及 ：checked 和：hover 状态。

使用这个干净的HTML

 < input type = id =inputOne/> 
< label for =inputOne>< / label> 
     $ c> id 属性，将标签附加到复选框。另外，元素的顺序非常重要;标签必须在输入后面，所以我们可以使用 input：checked  
 
 
 
 / h2> 
 
 
 
 
 
该复选框隐藏了 display：none  （： c>之后的 c>伪元素） 
 
 
 
 
由border-radius引起的锯齿状边缘可以通过匹配的颜色 box-shadow 进行软化。 
 
 
 
 
   transition：all 0.4s  创建一个平滑的淡入/ out>。
 
 
 
 
 
我在CSS评论中添加了更多指导。
 
 
 
完成示例
 
 
 
 
 
 
  input [type = {display：none;} / *  - 为每个直接位于输入位置之后的标签设置样式：position：将确保任何位置：绝对的孩子将定位自己与它相关* / input [type = checkbox] + label {position：relative; background：url（http://i.stack.imgur.com/ocgp1.jpg）no-repeat; height：50px; width：50px;显示：block; border-radius：50％;过渡：box-shadow 0.4s，border 0.4s; border：solid 5px #FFF; box-shadow：0 0 1px #FFF; / *软化锯齿边* / cursor：pointer;} / *提供一个边框，当hover和当它前面的复选框选中* / input [type = checkbox] + label：hover ，input [type = checkbox]：checked + label {border：solid 5px＃F00; box-shadow：0 0 1px＃F00; / *柔化锯齿边* /} / *  - 创建一个伪元素：当选中并提供一个tick-中心内容* / input [type = checkbox]：checked + label：after {content：'\2714' ; / *内容是必需的，虽然它可以为空 - 内容：''; * / height：1em; position：absolute; top：0; left：0; bottom：0; right：0; margin：auto;颜色：＃F00; line-height：1; font-size：18px; text-align：center;}  
 
 < input type = checkboxid =inputOne/>  
 
I have the following mark-up using the bootstrap framework.
<div class="col-md-4">
  <div class="custom-container">
    <img class="center-block img-responsive img-circle invite-contact-trybe" src="{$img}" alt="Contact Image">
    <input class="invite-contact-checkbox" type="checkbox">
  </div>
</div>
I would like to achieve the following:



Is there anyway to do this using CSS?

I would obviously need 3 states:

Initial:
.custom-container input[type=checkbox]{}
Some form of hover state:
.custom-container input[type=checkbox]:hover{}
When it is checked:
.custom-container  input[type=checkbox]:checked{}
Can anyone suggest a solution?
解决方案
Background image checkbox replacement

Let's create this



This is a very simple example using a :before pseudo element as well as :checked and :hover states. 

With this clean HTML

<input type="checkbox" id="inputOne" />
<label for="inputOne"></label>
Note the matching for and id attributes, this attaches the label to the checkbox. Also, the order of elements is very important; the label must come after the input so we can style with input:checked

As well as this Basic CSS


The checkbox is hidden with display: none and all interaction is done with the label
The :after pseudo element is given a unicode tick (\2714) but this could also be ticked with a background image.
The jagged edge caused by the border-radius can be softened by a matching color box-shadow. The inside edge of the border looks fine when the background image is not a solid block of color.
The transition: all 0.4s creates a smooth fade in / out for the border.


I have added more guidance in CSS comments.

Complete Example



input[type=checkbox] {
  display: none;
}
/* 
- Style each label that is directly after the input
- position: relative; will ensure that any position: absolute children will position themselves in relation to it
*/

input[type=checkbox] + label {
  position: relative;
  background: url(http://i.stack.imgur.com/ocgp1.jpg) no-repeat;
  height: 50px;
  width: 50px;
  display: block;
  border-radius: 50%;
  transition: box-shadow 0.4s, border 0.4s;
  border: solid 5px #FFF;
  box-shadow: 0 0 1px #FFF;/* Soften the jagged edge */
  cursor: pointer;
}
/* Provide a border when hovered and when the checkbox before it is checked */

input[type=checkbox] + label:hover,
input[type=checkbox]:checked + label {
  border: solid 5px #F00;
  box-shadow: 0 0 1px #F00;
  /* Soften the jagged edge */
}
/* 
- Create a pseudo element :after when checked and provide a tick
- Center the content
*/

input[type=checkbox]:checked + label:after {
  content: '\2714';
  /*content is required, though it can be empty - content: '';*/
  height: 1em;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  color: #F00;
  line-height: 1;
  font-size: 18px;
  text-align: center;
}

<input type="checkbox" id="inputOne" />
<label for="inputOne"></label>





                        
这篇关于使用CSS和放大器创建自定义复选框引导的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！