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:

Checkbox design

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?

hongkiat.com/blog/css3-checkbox-radio there's quite a number of plugins, ideas, etc., for this. Google for it. Bootstrap is just css and js, there's nothing built in for this. The Bootstrap people particularly stay away from styling native elements. — Christina
– Christina, Commented Oct 23, 2014 at 15:32

Community · Accepted Answer · 2020-06-20 09:12:55Z

44

Background image checkbox replacement

Let's create this

Screenshot

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(https://i.sstatic.net/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>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 23, 2014 at 15:49

misterManSam

24.8k11 gold badges72 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

cwiggo Over a year ago

Excellent answer, love the use of the new stackoverflow code snippet too! Thanks a lot, i'll post a link to my final solution here when i've implemented it. Thank you :D reputation++

cwiggo Over a year ago

I'm worried about hard coding the image using css.. Can you not use an <img> meta with this solution? I'm dynamically creating these checkboxes you see! :)

misterManSam Over a year ago

@Chris - You can place the background image on the label in the HTML using your variable like this: <label style="background: {$img}"> and remove the current background image from the CSS stylesheet. That way your method of providing the url doesn't change :)

Rebecca Over a year ago

@misterManSam : can u help me with multiple images? when i tried this code, it works fine for single image but multiple image makes the first image checked, please help

misterManSam Over a year ago

@Rebecca - If you are still looking for a solution, you just need to rename each id and for attribute so that each checkbox input is matched with its label. Here is an example

Collectives™ on Stack Overflow

Creating a custom checkbox with CSS & Bootstrap

1 Answer 1

Background image checkbox replacement

Let's create this

With this clean HTML

As well as this Basic CSS

Complete Example

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Background image checkbox replacement

Let's create this

With this clean HTML

As well as this Basic CSS

Complete Example

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related