刚发现一个 CSS 活用案例，顺便来说下你都见过哪些类似的奇技淫巧

[enchilada2020]

这个应该还算蛮基础的用法，用 CSS 画多选按钮来保证所有浏览器的样式都一致：

<label class="checkbox">hover to simulate check action</label>

:root {
  font-size: 80px;
  --box-width: 1em;
  --box-height: 1em;
}

.checkbox {
  position: relative;
  display: inline-block;
  padding-left: 1.5em;
  vertical-align: middle;
  cursor: pointer;
}

.checkbox::before,
.checkbox::after {
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: calc(-0.5 * var(--box-height));
  content: "";
  box-sizing: border-box;
  width: var(--box-width);
  height: var(--box-height);
}

.checkbox::before {
  border: .0625em solid #e0e0e0;
  box-shadow: 0 0 .0625em 0 rgba(0, 0, 0, .1);
  background-color: #fff;
  border-radius: .2em;
}

.checkbox:hover::after {
  margin-top: calc(-0.4 * var(--box-height));
  margin-left: calc(0.1 * var(--box-width));
  box-sizing: border-box;
  width: calc(var(--box-width) * 0.8);
  height: calc(var(--box-height) * 0.5);
  border-left: .1875em solid #7b1451;
  border-bottom: .1875em solid #7b1451;
  transform: rotate(-60deg) skew(-20deg);
}

有没有什么更好的实现方式？另外还有哪些类似的“奇技淫巧”，欢迎各位 CSS 大佬来秀操作，想开开眼界~

[codehz]

其实不一定要用 hover 来模拟，你可以盖一个透明的 input checkbox 然后通过:checked + 选择器来做的（）

[chenalex]

我都是让 ui 直接出图

[enchilada2020]

@codehz 确实可以这样 只是更习惯把 input 放到 label 里面 但放里面就用不了 CSS 选择器了

[ooolooo]

这不是所有的 UI 库都会做的事情吗, 就是要保证一致性

[codehz]

@enchilada2020 那就外面 label 里面一个 input 一个 div/span 就可以（）

[RoshanWu]

https://roshanx.notion.site/CSS-8cdb72c5d7784b9286c08a9b4d5c7426?pvs=4