使用 CSS & 创建自定义复选框引导程序 [英] Creating a custom checkbox with CSS & Bootstrap

问题描述

我使用引导框架进行了以下标记.

<div class="custom-container"><img class="center-block img-responsive img-circle invoice-contact-trybe" src="{$img}" alt="联系人图片"><input class="invite-contact-checkbox" type="checkbox">

我想实现以下目标:

无论如何可以使用 CSS 来做到这一点?

我显然需要 3 个状态:

初始:

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

某种形式的悬停状态:

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

当它被选中时:

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

谁能提出解决方案?

解决方案

背景图片复选框替换

让我们创造这个

这是一个使用 的非常简单的示例:before 伪元素以及 :checked 和 :hover 状态.

有了这个干净的 HTML

注意匹配的 for 和 id 属性，这会将标签附加到复选框.此外，元素的顺序非常重要；标签必须在输入之后，以便我们可以使用 input:checked

设置样式

以及这个基本的 CSS

• 复选框被 display: none 隐藏，所有交互都通过标签完成

• :after 伪元素被赋予一个 unicode 勾号 (2714)，但这也可以用背景图像勾号.

• 由border-radius引起的锯齿状边缘可以通过匹配颜色box-shadow来柔化.当背景图像不是纯色块时，边框的内边缘看起来不错.

• transition: all 0.4s为边框创建平滑的淡入/淡出.

我在 CSS 注释中添加了更多指导.

完整示例

input[type=checkbox] {显示:无；}/*- 为输入后的每个标签设置样式- 位置:相对；将确保任何位置:绝对孩子将自己定位于它*/输入[类型=复选框] + 标签{位置:相对；背景: url(http://i.stack.imgur.com/ocgp1.jpg) 不重复；高度:50px；宽度:50px；显示:块；边界半径:50%；过渡:box-shadow 0.4s，border 0.4s；边框:实心 5px #FFF；box-shadow: 0 0 1px #FFF;/* 柔化锯齿边缘 */光标:指针；}/* 悬停和选中之前的复选框时提供边框 */输入[类型=复选框] + 标签:悬停，输入[类型=复选框]:选中+标签{边框:实心 5px #F00;框阴影:0 0 1px #F00;/* 柔化锯齿边缘 */}/*- 创建一个伪元素:在选中之后并提供一个勾号- 将内容居中*/输入[类型=复选框]:选中+标签:{内容:'2714';/* 内容是必需的，虽然它可以是空的 - content: '';*/高度:1em；位置:绝对；顶部:0；左:0；底部:0；右:0；保证金:自动；颜色:#F00；行高:1；字体大小:18px；文本对齐:居中；}

<label for="inputOne"></label>

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屋！