复选框样式为按钮输入：选中的背景色不占用按钮空间

Question

我一直在寻找使复选框看起来像按钮的方法，我偶然发现了question，但是我在我的页面上添加了填充，

.ck-button {
  padding: 5px 5px 0px 5px;
}

这是jsfiddle

如您所见，单击时，它将仅更改跨度的颜色，而不是整个按钮的颜色。我试图在此处添加填充

.ck-button input:checked + span {
  background-color:#0077CC;
  color:#fff;
}

或删除span，但它们都不起作用。请帮助我，谢谢你。

Answer 1

尝试一下。您必须对ck-button label span类中的ck-button进行填充。

div label input {
   margin-right:100px;
}
body {
    font-family:sans-serif;
}

.ck-button {
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    float:left;
    /*padding: 5px 5px 5px 5px;*/
}

.ck-button label {
    display:block;
    width:5.0em;
}

.ck-button label span {
    text-align:center;
    padding:5px 5px;
    display:block;
}

.ck-button label input {
    position:absolute;
    opacity:0;
    /*top:-20px;  don't use this thing use opacity:0 */
}

.ck-button input:checked + span {
    background-color:#911;
    color:#fff;
}

<div class="ck-button">
   <label>
      <input type="checkbox" value="1"><span>red</span>
   </label>
</div>
<div class="ck-button">
   <label>
      <input type="checkbox" value="2"><span>red</span>
   </label>
</div>