Question

我正在尝试使选中的模式看起来像我的自定义复选框的悬停模式。我意识到问题出在标签上，但我没有成功设计出适合整个包装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

找不到正确的问题，但是如果您想将标签test设置为与div一样宽。将width: 100%添加到.ck-btn label{}。

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

Answer 2

我不想对代码进行太多更改，但是如果您只是从标签样式中删除float: left;，则大多数情况下一切都会对齐。选中复选框后，您仍然需要在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>

样式自定义复选框标签外观

2 个答案: