css - 将复选框设置为按钮样式 - 如何添加边距？

Question

按照本文中的建议，将我的复选框设置为类似于按钮的样式: CSS: styled a checkbox to look like a button, is there a hover?

现在我一直在尝试为按钮添加一些边距。这是行不通的，一旦按钮被选中，只有没有边距的区域被突出显示。这看起来糟透了......

#ck-button label span {
    text-align:center;
    padding:3px 0px;
    display:block;
    margin: 10px;
}

参见此处:http://jsfiddle.net/Vq759/

有人知道怎么解决吗？

谢谢伙伴们:)

Answer 1

我认为您使用 HTML/CSS 使事情变得过于复杂，这里是我如何设置复选框样式的快速重做(完全可定制以满足您的任何需要)。

简单的 HTML:

<input type="checkbox" value="1">
<label>Red</label>

我通过简单地隐藏它来开始样式化复选框:

input[type="checkbox"] {
  display: none;
}

这使得可选的事件/状态如 :checked 完好无损。

从这里我设计了整个对象以满足我的需要，例如:

input[type="checkbox"] + label {
  display:inline-block; /* or block */
  line-height:normal;
  cursor:pointer;
  padding: 3px 14px;
  background-color: #EFEFEF;
  border-radius: 4px;
  border: 1px solid #D0D0D0;
  margin: 40px 100px 10px 40px; /* however you please */
}

/* hover event */
input[type="checkbox"] + label:hover {
  border-color: #000;
  background-color: #911;
  color: #fff;
}

/* checked checkbox */
input[type="checkbox"]:checked + label {
  border-color: #000;
  background-color: #888;
  color: #fff;
}

margin 工作完美。

fiddle :http://jsfiddle.net/8e5Xa/