Creating a custom checkbox with CSS & Bootstrap

Question

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?

Answer 1

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>