关于Checkbox与文本间距、选中样式及文本触发勾选的前端求助

1. 实现勾选时Checkbox背景为橙色 #

原生复选框默认样式难以直接修改，我们可以通过隐藏原生控件，用CSS伪元素自定义样式来实现需求：

2. 点击文本触发勾选 #

你已经用<label>包裹了复选框和文本，这个结构本身就支持点击文本切换复选框状态，只需确保没有CSS阻止label的点击交互即可。

3. 解决Checkbox与文本的间距问题 #

你的CSS选择器存在错误（多了一个不必要的点），同时可以通过两种方式添加间距：给复选框设置margin-right，或者给label的flex布局添加gap属性（更推荐，布局更灵活）。

完整可运行代码 #

.options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.options label {
    display: flex;
    align-items: center;
    color: #777;
    gap: 8px; /* 控制复选框与文本的间距 */
    cursor: pointer; /* 提示可点击 */
}

/* 自定义复选框样式 */
.options input[type="checkbox"] {
    appearance: none; /* 隐藏原生样式 */
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
}

/* 勾选时的橙色背景 */
.options input[type="checkbox"]:checked {
    background-color: #ff7f24;
    border-color: #ff7f24;
}

/* 添加勾选对勾 */
.options input[type="checkbox"]:checked::after {
    content: "\2713";
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
}

<div class="options">
  <label>
    <input type="checkbox">
    <span>Keep me logged in</span>
  </label>
  <a href="#">Reset Password</a>
</div>

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