Bootstrap复选框编辑边框样式不起作用 [英] Bootstrap checkbox editing border style not working

问题描述

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

I am trying to change the default style of bootstrap checkboxes. I want to add different borders for unchecked, hover and checked. When I try adding a shadow, it works, however border and changing the background color does not work.

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小提琴

谢谢.

推荐答案

首先，这是无效的标记:

Firstly, this is invalid markup:

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

这是有效的标记:

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

第二，您不能以这种方式设置复选框的样式.请参阅如何使用CSS设置复选框样式?

Secondly, you cannot style checkboxes this way. See How to style checkbox using CSS?

第三，您有一些无效的CSS属性.背景色应为 background-color ，但同样不能使用(请参见上面的链接).

Thirdly, you have some invalid CSS properties. background color should be background-color, but again this will not work (see the link above).

这里的 border 的一种快速替代方法是使用 outline ，但这不是很理想:

A quick alternative to border here would be to use outline, but this isn't very desirable:

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

JSFiddle演示 .

这篇关于Bootstrap复选框编辑边框样式不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！