html - 使边框变粗并改变颜色或在 awesome-bootstrap-checkbox 上产生阴影效果？

Question

我正在使用 3 awesome-bootstrap-checkboxes没有标签。
我的客户希望在复选框被选中之前使用不同的颜色。 我尝试更改 border-color 和 box-shadow 但这不起作用。 (是的，我不擅长 css。)坦率地说，我不知道我应该给什么目标对象作为 css 效果。

是否可以使 awesome-check-boxes 的边框变粗并改变它们的颜色？或者给复选框的边框添加阴影效果？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/awesome-bootstrap-checkbox/0.3.7/awesome-bootstrap-checkbox.min.css" rel="stylesheet"/>


<div class="checkbox checkbox-success">
                        <input type="checkbox" class="styled styled-primary" id="singleCheckbox2" value="option2" aria-label="Single checkbox Two">
                        <label></label>
                    </div>
                    <div class="checkbox checkbox-warning">
                        <input type="checkbox" class="styled styled-primary" id="singleCheckbox2" value="option2" aria-label="Single checkbox Two">
                        <label></label>
                    </div>
                    <div class="checkbox checkbox-danger">
                        <input type="checkbox" class="styled styled-primary" id="singleCheckbox2" value="option2" aria-label="Single checkbox Two">
                        <label></label>
                    </div>
                    

check action 后会变成这样(见图)。但我想让复选框总是这样。 (检查前。一直处于正常状态)

Answer 1

在 css 下方添加用于覆盖 awesome-bootstrap-checkbox

.checkbox {
    margin:15px;
}
.checkbox label::before {
    border: 1px solid #0095ff;
    box-shadow: 0 0 3px 2px #0095ff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/awesome-bootstrap-checkbox/0.3.7/awesome-bootstrap-checkbox.min.css" rel="stylesheet"/>


<div class="checkbox checkbox-success">
                        <input type="checkbox" class="styled styled-primary" id="singleCheckbox2" value="option2" aria-label="Single checkbox Two">
                        <label></label>
                    </div>
                    <div class="checkbox checkbox-warning">
                        <input type="checkbox" class="styled styled-primary" id="singleCheckbox2" value="option2" aria-label="Single checkbox Two">
                        <label></label>
                    </div>
                    <div class="checkbox checkbox-danger">
                        <input type="checkbox" class="styled styled-primary" id="singleCheckbox2" value="option2" aria-label="Single checkbox Two">
                        <label></label>
                    </div>