Question

我正在尝试更改引导复选框的默认样式。我想为未选中，悬停和检查添加不同的边框。当我尝试添加阴影时，它可以工作，但边框和更改背景颜色不起作用。

input[type="checkbox"]{
    width: 20px;
    height: 20px;
    border: 1px solid #59A29B;
    background color: #FFFFFF;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
}

它不起作用的例子。 JS Fiddle

提前致谢。

Answer 1

首先，这是无效的标记：

<input type="checkbox" value="" id="test">
Option one
</input>

这是有效的标记：

<label>
    <input type="checkbox" value="" id="test" />
    Option one
</label>

其次，你不能用这种方式设置复选框样式。见How to style checkbox using CSS?

第三，您有一些无效的CSS属性。 background color应为background-color，但这又不起作用（请参阅上面的链接）。

此处border的快速替代方法是使用outline，但这不是很理想：

#test{
    outline: 1px solid #f00;
}

JSFiddle demo

Bootstrap复选框编辑边框样式不起作用

1 个答案: