如何使用HTML和CSS为切换开关添加勾选标记

问题分析 #

你的代码存在两个核心问题：

• 默认状态下label的伪元素始终显示，干扰开启状态的勾号展示
• 开启状态下伪元素的定位、旋转参数错误，无法形成正确的勾号形状

修正后的代码 #

HTML（无需修改）

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<h2>rolling toggle</h2>
<input type="checkbox" id="toggle" />
<div class="toggle-checkbox">
  <label for="toggle"></label>
</div>

CSS（关键修改标注）

/* CSS for toggle checkbox */

#toggle {
  display: none;
}

.toggle-checkbox label {
  transition: 400ms all ease-in-out 50ms;
  box-sizing: border-box;
  backface-visibility: hidden;
}

.toggle-checkbox {
  height: 25px;
  width: 50px;
  background: rgba(43, 43, 43, 1);
  position: relative;
  box-shadow: 0 0 2px rgba(43, 43, 43, 1);
  border-radius: 50px;
  transition: background 0.5s ease-out, box-shadow 0.5s ease-out;
}

#toggle:checked~.toggle-checkbox {
  background: rgba(73, 168, 68, 1);
  box-shadow: 0 0 2px rgba(73, 168, 68, 1);
}

/* 默认状态隐藏勾号伪元素 */
.toggle-checkbox label::before,
.toggle-checkbox label::after {
  content: '';
  position: absolute;
  background: transparent;
  transition: all 0.3s ease;
}

.toggle-checkbox label {
  height: 20px;
  width: 20px;
  background: rgba(255, 255, 255, 1);
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  cursor: pointer;
  border-radius: 50px;
}

#toggle:checked~.toggle-checkbox label {
  left: 25px;
  transform: rotate(360deg);
}

/* 开启状态渲染正确勾号 */
#toggle:checked~.toggle-checkbox label::before {
  height: 10px;
  width: 2px;
  top: 40%;
  left: 60%;
  transform: rotate(45deg);
  background: rgba(73, 168, 68, 1);
  border-radius: 2px;
}

#toggle:checked~.toggle-checkbox label::after {
  height: 2px;
  width: 10px;
  top: 65%;
  left: 35%;
  transform: rotate(-45deg);
  background: rgba(73, 168, 68, 1);
  border-radius: 2px;
}

关键修改说明 #

• 默认状态下将伪元素背景设为透明，消除多余图形干扰
• 用百分比调整开启状态伪元素的定位，确保勾号在圆形按钮内居中
• 修正旋转角度，让两个伪元素组合成标准勾选形状
• 保留原按钮旋转动画，不影响勾号的正常展示

内容的提问来源于stack exchange，提问作者Wouter