时间戳

首页 > 解决方案 > 使边框变粗并改变颜色或在 awesome-bootstrap-checkbox 上产生阴影效果？

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

问题描述

我正在使用 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>

检查操作后它会像这样改变（见图）。但我想让复选框总是这样。（在检查之前。始终处于正常状态）

在此处输入图像描述

标签： htmlcsscheckbox

解决方案

在下面添加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>

推荐阅读