CSS & JS Effect – Styling Input Radio

原生 Radio 的 Limitation

<input type="radio" style="width: 25px; height: 25px; cursor: pointer" />

效果

原生的 radio 其实长的不丑, 但它不能调颜色, radio 无法配合网站的 primary, secondary 颜色, 基本上就不能用了.

参考

Youtube – Style Radio Buttons with CSS

Youtube – How to Create a Custom Radio Button - HTML & CSS Tutorial

MDC – Radio buttons

解决思路

它的做法和 custom input file 类似, 做一个假的 radio 放到原生 radio 后面, 然后让原生 radio opacity 0.

这样 user 看到是假的 radio, 但是点击的确实真的 radio.

效果

HTML 结构

<div class="radio-wrapper">
  <input type="radio" name="group" id="radio1" />
  <div class="fake-radio">
    <div class="checked-marker"></div>
  </div>
</div>

真 radio 在前, 假 radio 在后, 它们是重叠的. 所以需要一个 wrapper 包着它们做定位.

里面就放真假 radio.

假 radio 长这样

一个圈, checked 之后中间多了一个点, 所以 HTML 结果就是 .fake-radio > .checked-marker

真 Radio CSS Style

.radio-wrapper {
  position: relative;
  width: 50px;
  height: 50px;

  input {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    // opacity: 0;
  }
}

wrapper 负责控制 dimension. input 就定位 100% 就可以了 (注: 这里用不了 inset: 0 哦)

我暂时把 opacity 注释掉, 看看效果

把 opacity 开启就什么都看不见了.

假 Radio CSS Style

.fake-radio {
  width: 100%;
  height: 100%;
  border: 2px solid hsl(0, 0%, 70%);
  border-radius: 50%;
  transition: border-color 0.4s;

  .checked-marker {
    background-color: crimson;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.4s;
  }
}

真 radio 定位就在上层了, 所以假 radio 就不必定位了. 真前假后就对了.

dimension 也是 100% follow wrapper.

fake-radio 负责 border

checked marker 负责中间的点, 它的大小是通过 scale 控制的哦

:checked and :focus

最后就是当真 radio :checked 和 :focus 时, 假 radio 需要反应 style

input:focus + .fake-radio {
  border-color: lightpink;
}

input:checked + .fake-radio {
  border-color: crimson;
  .checked-marker {
    transform: scale(0.6);
  }
}

通过 sibling selector 的方式去找到 fake-radio

这样就搞定了.

MDC Radio buttons

Material 的 radio 比较复杂一点

1. 它多了一个框的概念

整个 40px,  绿色的部分都是可以点击的, 那是 padding 来的. 而中间的 radio 只有 20px 而且

focus 的时候就更明显了. 浅色都是在 padding 内.

而原生的 radio 是没有 padding 概念的.