樣式自定義復選框 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>