html - 样式为按钮输入的复选框 :checked background color does not occupy button space

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>