样式自定义复选框 label 外观

Question

我正在尝试使选中模式看起来像我的自定义复选框的 hover 模式。 我意识到问题出在 label 上，但我没有成功地对其进行造型以适应整个包装器 div。

<div class="ck-btn">
   <label>
     <input type="checkbox"><span>test</span>
   </label>
</div>

这是我的 css：

.ck-btn {
    padding: .3rem 1.8rem;
    box-shadow: 0 2px 4px 0 rgba(185, 185, 185, 0.6),0 2px 10px 0 rgba(185, 185, 185,0.26);
    transition: all .2s ease-in;
    cursor: pointer;
    border-radius: 45px;
    border: 1px solid #b183ce;
    background-color: transparent;
    color: #b183ce;
    font-weight: 600;
    font-size: 1rem;
}

.ck-btn:hover {
    box-shadow: none;
    background-image: linear-gradient(to left, #b183ce, #56dac2);
    color: white;
    border: 1px solid white;
}

.ck-btn label {
    float: left;
    width: 4em;
    cursor: pointer;
}

.ck-btn label span {
    text-align: center;
    padding: 3px 0px;
    border-radius: 45px;
    display: block;
}

.ck-btn label input {
    position: absolute;
    top: -20px;
}

.ck-btn input:checked + span {
    box-shadow: none;
    background-image: linear-gradient(to left, #b183ce, #56dac2);
    color: white;
    border: 1px solid white;
}

Answer 1

没有正确回答您的问题，但是如果您想让 label test与您的 hover div 一样宽。 将width: 100%添加到.ck-btn label{} 。

让我知道您是否想要其他东西

Answer 2

我不想过多地更改您的代码，但如果您只是删除float: left; 从 label styles 在大多数情况下，一切都会对齐。 选中复选框时，您仍然需要修补 div 或溢出span的填充以填充 div。

以下是更新示例：

 .ck-btn { padding: .3rem 1.8rem; box-shadow: 0 2px 4px 0 rgba(185, 185, 185, 0.6),0 2px 10px 0 rgba(185, 185, 185,0.26); transition: all.2s ease-in; cursor: pointer; border-radius: 45px; border: 1px solid #b183ce; background-color: transparent; color: #b183ce; font-weight: 600; font-size: 1rem; }.ck-btn:hover { box-shadow: none; background-image: linear-gradient(to left, #b183ce, #56dac2); color: white; border: 1px solid white; }.ck-btn label { width: 4em; cursor: pointer; }.ck-btn label span { text-align: center; padding: 3px 0px; border-radius: 45px; display: block; width: 100% }.ck-btn label input { position: absolute; top: -20px; }.ck-btn input:checked + span { box-shadow: none; background-image: linear-gradient(to left, #b183ce, #56dac2); color: white; border: 1px solid white; }

 <div class="ck-btn"> <label> <input type="checkbox"><span>test</span> </label> </div>