Issue with pure-CSS fancy checkbox

Question

I am trying to come up with a pure-css fancy checkbox. And I have succeeded to achieve my goal by 90%, with the only exception that I see the irritating standard chechbox appear from under my fancy checkbox. And I can't get rid of it. Any help ?

.checkboxFive {
  width: 12px;
  margin: 12px 100px;
  position: relative;
}

.checkboxFive label {
  cursor: pointer;
  position: absolute;
  width: 12px;
  height: 12px;
  top: 0;
  left: 0;
  background: #eee;
  border: 1px solid #ddd;
}

.checkboxFive label:after {
  opacity: 0;
  content: '';
  position: absolute;
  width: 11px;
  height: 4px;
  background: transparent;
  top: 1px;
  left: 3px;
  border: 2px solid #333;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
}

.checkboxFive label:hover::after {
  opacity: 0.5;
}

.checkboxFive input[type=checkbox]:checked + label:after {
  opacity: 1;
}

<div class="checkboxFive">
  <input type="checkbox" value="1" id="checkboxFiveInput" name="" />
  <label for="checkboxFiveInput"></label>
</div>

G-Cyrillus · Accepted Answer · 2017-03-06 21:14:41Z

you can remove it from screen with position and coordonates.

(display or visibility might become an accessibility issue)

.checkboxFive {
  width: 12px;
  margin: 12px 100px;
  position: relative;
}

.checkboxFive label {
  cursor: pointer;
  position: absolute;
  width: 12px;
  height: 12px;
  top: 0;
  left: 0;
  background: #eee;
  border: 1px solid #ddd;
}

.checkboxFive label:after {
  opacity: 0;
  content: '';
  position: absolute;
  width: 11px;
  height: 4px;
  background: transparent;
  top: 1px;
  left: 3px;
  border: 2px solid #333;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
}

.checkboxFive label:hover::after {
  opacity: 0.5;
}
#checkboxFiveInput {
position:absolute;
left:-9999px;
}
.checkboxFive input[type=checkbox]:checked + label:after {
  opacity: 1;
}

<div class="checkboxFive">
  <input type="checkbox" value="1" id="checkboxFiveInput" name="" />
  <label for="checkboxFiveInput"></label>
</div>

Namoz · Accepted Answer · 2017-03-06 21:07:29Z

Add a display:none to checkboxFiveInput.

.checkboxFive {
  width: 12px;
  margin: 12px 100px;
  position: relative;
}

.checkboxFive input {
   display:none;
 }

.checkboxFive label {
  cursor: pointer;
  position: absolute;
  width: 12px;
  height: 12px;
  top: 0;
  left: 0;
  background: #eee;
  border: 1px solid #ddd;
}

.checkboxFive label:after {
  opacity: 0;
  content: '';
  position: absolute;
  width: 11px;
  height: 4px;
  background: transparent;
  top: 1px;
  left: 3px;
  border: 2px solid #333;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
}

.checkboxFive label:hover::after {
  opacity: 0.5;
}

.checkboxFive input[type=checkbox]:checked + label:after {
  opacity: 1;
}

<div class="checkboxFive">
  <input type="checkbox" value="1" id="checkboxFiveInput" name="" />
  <label for="checkboxFiveInput"></label>
</div>

Fantastic. @Namoz, one more question (off-topic). How do you change the color of the tick ?
On .checkboxFive label:after change the following line : border: 3px solid blue; Blue is the color of the tick, you can use hexa value.

jtmingus · Accepted Answer · 2017-03-06 21:11:59Z

1

The first step in creating a custom checkbox is to add visibility: hidden to your input element. In your case, your css would look like this:

.checkboxFive #checkboxFiveInput {
    visibility: hidden;
}

You can see this link for more information about building custom checkboxes.

answered Mar 6, 2017 at 21:11

jtmingus

8345 silver badges10 bronze badges

Collectives™ on Stack Overflow

Issue with pure-CSS fancy checkbox

3 Answers 3

Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Related