current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 6 down vote favorite

I need to create a custom checkbox using only html and CSS. So far I have:

HTML/CSS:

.checkbox-custom {
  opacity: 0;
  position: absolute;
}
.checkbox-custom,
.checkbox-custom-label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
.checkbox-custom + .checkbox-custom-label:before {
  content: '';
  background: #fff;
  border-radius: 5px;
  border: 2px solid #ddd;
  display: inline-block;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  padding: 2px;
  margin-right: 10px;
  text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 5px;
  border: solid blue;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  border-radius: 0px;
  margin: 0px 15px 5px 5px;
}
<div>
  <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox">
  <label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
</div>
<div>
  <input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
  <label for="checkbox-2" class="checkbox-custom-label">Second Choice</label>
</div>

The checked checkbox should be a checkmark with the square bordered around it instead of just a checkmark. Searching for answers, I have only found cases where the checkmark is displayed using a UTF-8 character or an image. I am not able to use either of these for what I am trying to accomplish. I am only able to use plain CSS and HTML. Any suggestions?

codepen here: http://codepen.io/alisontague/pen/EPXagW?editors=110

share|improve this question
up vote 5 down vote

The problem is that you are using the same pseudo element for the square border and the checkmark. The simple solution would be to continue using the :before pseudo element for the border, and then use an :after pseudo element for the checkmark.

Updated Example

You would have to absolutely position the :after pseudo element relative to the parent .checkbox-custom label element.

Here is the updated code:

.checkbox-custom {
  display: none;
}
.checkbox-custom-label {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
.checkbox-custom + .checkbox-custom-label:before {
  content: '';
  background: #fff;
  border-radius: 5px;
  border: 2px solid #ddd;
  display: inline-block;
  vertical-align: middle;
  width: 10px; height: 10px;
  padding: 2px; margin-right: 10px;
}
.checkbox-custom:checked + .checkbox-custom-label:after {
  content: "";
  padding: 2px;
  position: absolute;
  width: 1px;
  height: 5px;
  border: solid blue;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  top: 2px; left: 5px;
}
<h3>Checkboxes</h3>
<div>
  <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox">
  <label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
</div>
<div>
  <input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
  <label for="checkbox-2" class="checkbox-custom-label">Second Choice</label>
</div>

share|improve this answer
    
exactly what i needed. thank you so much! – alisontague 2 hours ago
up vote 2 down vote

I've done something similar to this before. I used a ::before pseudo-element on the checkbox containing the unicode checkmark (\2713). It's there whether the box is checked or not, but the color matches the background color of the pseudo-element when it's not checked. I hid the actual checkbox using the visibility property.

I didn't use any of the CSS from your original post. I just used input[type=checkbox]::before and input[type=checkbox]:checked::before

input[type=checkbox] {
  visibility: hidden;
}

input[type=checkbox]::before {
  content: '\2713';
  color: white;
  display: inline-block;
  visibility: visible;
  width: 1em;
  height: 1em;
  text-align: center;
  line-height: 1em;
  border: 1px inset silver;
  border-radius: 0.25em;
}

input[type=checkbox]:checked::before {
  color: black;
}
<form name="checkbox-form" id="checkbox-form">
  <div>
    <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox">
    <label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
  </div>
  <div>
    <input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
    <label for="checkbox-2" class="checkbox-custom-label">Second Choice</label>
  </div>
</form>

I also did a demo at CodePen.

share|improve this answer
    
Here's a variation using your pseudo-checkmark (element with 2 blue borders) on an input[type=checkbox]:checked::after element : codepen.io/Ghodmode/pen/RrgNQq Note that I'm using relative units for all the sizes. – Ghodmode 2 hours ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.