Question

我正在尝试自定义复选框的颜色。我按照文档进行操作，然后想出了一种改变背景的方法：

.custom-control-input:checked ~ .custom-control-indicator {
        background-color: #ffa500;
}

如果你单击复选框，还有一个蓝色边框（我认为）在盒子周围填充，但即使进行了一些研究，我也无法找到如何更改该边框的颜色。有人可以帮帮我吗？我做了一个fiddle来证明我拥有的东西。

任何人都知道如何更改边框？

提前致谢！

Answer 1

Bootstrap 4使用Map<String, BufferedImage> legendMap = new HashMap<>(); //fill the HashMap with label/image pairs... JRBeanCollectionDataSource beanColDataSource = new JRBeanCollectionDataSource((Collection<?>) legendMap); selectedReport.getReportParameters().put("P_DS1", beanColDataSource);来获得此效果：

box-shadow

圆角边框定义为.custom-control-input:focus~.custom-control-indicator { -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 3px #0275d8; box-shadow: 0 0 0 1px #fff, 0 0 0 3px #0275d8; }：

border-radius

Answer 2

要删除蓝色边框并将活动状态背景重置为Bootstrap v4.0.0中的#fff，请使用：

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: none;
}
.custom-control-input:active ~ .custom-control-label::before {
    background-color: #fff;
}

Answer 3

您可以使用自定义边框：

Time Series:
Start = 2000 
End = 2019 
Frequency = 1 
 [1] 57.82 57.33 54.81 54.74 54.19 54.34 53.75 53.57 53.54 53.13
[11] 53.51 53.76 54.90 56.75 58.46 59.34 59.47 58.73 58.75 58.69

input[type="checkbox"]{
    width: 20px;
    height: 20px;
}
    #with{
        outline: 1px solid #f00;
    }

#shadow-checkbox{
    box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
}

Bootstrap 4：自定义复选框边框

3 个答案: