Valentine Valentine - 2 months ago 7
HTML Question

Erased border with the scale

There stylized input, but the zoom in / out, they change size, it seems as if the border is lost, I can't understand what went wrong, thanks in advance.

My codepen

For example, Chrome - zoom 75%

Chrome - zoom 75%

<div class="checkbox-remember-me">
<input type="radio" name="gender" id="male" checked/>
<label for="male"></label>
</div>Male

Answer

This happens because you use an absolute positioned label to cover its parent partially to make it appear to have a border, and when the page is zoomed, depending on how the browser calculate its position, it jumps a pixel up and down, hence sometimes fully aligns with its parent's edge.

Update your css like this, and use a border instead, and it will work fine.

.checkbox-remember-me {
    display: inline-block;
    width: 24px;
    height: 24px;
    position: relative;
    border: 1px solid #666;
    margin-left: 34px;
    margin-right: 10px;
}
.checkbox-remember-me   label {
    width: 22px;
    height: 22px;
    cursor: pointer;
    position: absolute;
    background: #eee;
    margin: 1px;
}

.checkbox-remember-me {
  display: inline-block;
  width: 24px;
  height: 24px;
  position: relative;
  border: 1px solid #666;
  margin-left: 34px;
  margin-right: 10px;
}
.checkbox-remember-me label {
  width: 22px;
  height: 22px;
  cursor: pointer;
  position: absolute;
  background: #eee;
  margin: 1px;
}
.checkbox-remember-me label:after {
  content: '';
  width: 15px;
  height: 10px;
  position: absolute;
  top: 4px;
  left: 4px;
  border: 3px solid red;
  border-top: none;
  border-right: none;
  background: transparent;
  opacity: 0;
  transform: rotate(-45deg);
}
.checkbox-remember-me label:hover:after {
  opacity: 0.3;
}
input[type=radio] {
  display: none;
}
input[type=radio]:checked + label:after {
  opacity: 1;
}
<h4>Gender</h4>
<div class="checkbox-remember-me">
  <input type="radio" name="gender" id="male" checked/>
  <label for="male"></label>
</div>Male
<div class="checkbox-remember-me">
  <input type="radio" name="gender" id="female" />
  <label for="female"></label>
</div>Female

Updated codepen: https://codepen.io/anon/pen/LRLrNO

Comments