设置一个像按钮一样的复选框 - 如何添加保证金？

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;
}

保证金完美无缺。

小提琴：http://jsfiddle.net/8e5Xa/

Answer 2

如果你试图使按钮基本上更大并仍然使整个事物突出显示onClick，使用填充而不是边距：

#ck-button label span
{
    padding: 10px;
}

保证金将白色空间放在元素周围。 填充会在元素中添加空格。

JSFiddle

Answer 3

此选择器中的+运算符：

#ck-button input:checked + span 

..在旧版浏览器中无法正常运行。它有点工作，但在做你想做的事情时会有错误（特别是改变：相邻元素的：checked状态）。抱歉，如果您希望支持所有浏览器，那么您尝试做的事情是不可能的。

如果您希望在所有浏览器中选择span的文本颜色，则需要使用JavaScript。

或者，您可以选择一种颜色方案，如果跨度没有改变颜色，它看起来没问题，但确实在支持它的浏览器中更改颜色。

Answer 4

如果更改按钮的边距，请执行以下操作：

#ck-button {
    margin:40px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    float:left;
}

还看看这个：

这是每个HTML元素的框模型