CODEWITHSUNDEEP
csscheckbox
Mario Parra
Mario Parra

Reputation: 1554

Custom CSS checkbox and aligning tick on multiple lines

I've created a custom checkbox using :before and :after pseudo-elements on a <span>, which works great on single lines, but the tick hovers above the box when there's more than one line of text in its <span>.

I've tried using relative values for positioning, but nothing has worked.

<ul class="calendar-filter-menu-cont">
  <li>
    <label>
      <input type="checkbox">
      <span>One line</span>
    </label>
  </li>

  <li>
    <label>
      <input type="checkbox">
      <span>This is the second item in the list</span>
    </label>
  </li>

  <li>
    <label>
      <input type="checkbox">
      <span>This is the third item in the list</span>
    </label>
  </li>
</ul>


ul.calendar-filter-menu-cont {
  color: black;
  column-count: 3;
  max-width: 500px;
}
ul.calendar-filter-menu-cont > li {
  break-inside: avoid-column;
}
ul.calendar-filter-menu-cont > li label {
  display: flex;
  position: relative;
}
ul.calendar-filter-menu-cont > li label:not(:last-child) {
  margin-bottom: 10px;
}
ul.calendar-filter-menu-cont > li label input[type="checkbox"] {
  margin-right: 1em;
  opacity: 0;
}
ul.calendar-filter-menu-cont > li label input[type="checkbox"] + span:before {
  content: '';
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  border: 1px solid #979797;
  width: .8em;
  height: .8em;
  background-color: #f3f3f3;
  box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.2);
}
ul.calendar-filter-menu-cont > li label input[type="checkbox"]:checked + span:after {
  content: '';
  position: absolute;
  top: .7ex;
  left: .35ex;
  width: .9ex;
  height: .45ex;
  background: rgba(0, 0, 0, 0);
  border: 3px solid blue;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
}

Demo: https://codepen.io/anon/pen/PVGxBz

Upvotes: 0

Views: 1081

Answers (1)

jerrylow
jerrylow

Reputation: 2629

So the problem is that your :before and :after aren't aligned with the same properties. :before is vertically centered and :after is top aligned.

If you want to center your check box to the input box like such:

enter image description here

You need to center your checkmark with something as such:

ul.calendar-filter-menu-cont > li label input[type="checkbox"]:checked + span:after {
  content: '';
  position: absolute;
  top: .7ex;
  left: .35ex;
  width: .9ex;
  height: .45ex;
  background: rgba(0, 0, 0, 0);
  border: 3px solid blue;
  border-top: none;
  border-right: none;
  top: calc(50% - 1px); // Addition
  transform: translateY(-50%) rotate(-45deg); // Change
}

Changes include adding the top property and adding translateY value to the transform

If you want to have the checkbox top aligned with the input as such:

enter image description here

Just remove the transform and change the top property to a static value as such:

ul.calendar-filter-menu-cont > li label input[type="checkbox"] + span:before {
  content: '';
  display: inline-block;
  position: absolute;
  top: .3ex; // Change
  left: 0;
  /* transform: translateY(-50%); */ // Remove
  border: 1px solid #979797;
  width: .8em;
  height: .8em;
  background-color: #f3f3f3;
  box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.2);
}

Upvotes: 1

Related Questions