CODEWITHSUNDEEP
htmlcss
developthewebz
developthewebz

Reputation: 1937

Custom Checkbox is Changing Size

I am creating some custom checkboxes. I am hiding the standard checkbox and replacing it with the following:

.newcheckbox:before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 2px;
  background-color: rgba(29, 190, 96, 0.1);
  border: 1px solid #1DBE60;
}

input[type="checkbox"]:checked + .newcheckbox:before {
  color: #FFF;
  background-color: #1DBE60;
  content: "\2022";
  font-size: 20px;
  text-align: center;
}

The issue is, when I add 'content', when the checkbox is in a checked state its height changes and elements beneath it are jumping. I've been wracking my brain over what's causing this.

Here's a Plunk demonstrating the issue: http://plnkr.co/edit/Kc7XmgR4Nogx0w6Pmx9y?p=preview

You can see that when you remove 'content', it doesn't jump around.

Upvotes: 1

Views: 157

Answers (1)

repzero
repzero

Reputation: 8412

add overflow:hidden to all input[type="checkbox"]:checked

snippet here

/* Styles go here */

input[type="checkbox"] {
  display: none;
}

.tech-green:before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 2px;
  background-color: rgba(29, 190, 96, 0.1);
  border: 1px solid #1DBE60;
  overflow:hidden;
}

input[type="checkbox"]:checked + .tech-green:before {
  color: #FFF;
  background-color: #1DBE60;
  content: "\2022";
  font-size: 20px;
  text-align: center;
  display:inline-block;
  overflow:hidden;
}

.tech-warn:before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 2px;
  background-color: rgba(240, 147, 29, 0.1);
  border: 1px solid #F0931D;
}

input[type="checkbox"]:checked + .tech-warn:before {
  color: #FFF;
  background-color: #F0931D;
  content: "\2022";
  font-size: 20px;
  text-align: center;
  display:inline-block;
  overflow:hidden;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <div>
    <input id="techgreen" type="checkbox" name="check">
    <label for="techgreen" class="tech-green"></label>
  </div>

  <div>
    <input id="techwarn" type="checkbox" name="check">
    <label for="techwarn" class="tech-warn"></label>
  </div>

  <div>
    <input id="techgreen2" type="checkbox" name="check">
    <label for="techgreen2" class="tech-green"></label>
  </div>
</body>

</html>

Upvotes: 1

Related Questions