сделать границу более толстой и изменить цвет или дать эффект тени на awesome-bootstrap-checkbox?

Question

Я использую 3 флажки awesome-bootstrap-* без метки.
Мой клиент хочет разные цвета для флажков, прежде чем они будут проверены. Я пытался изменить border-color и box-shadow, но это не работает. (Да, я не очень хорош в CSS. Честно говоря, я не знаю, какой целевой объект я должен дать в качестве эффекта CSS.

Можно ли сделать границы удивительных флажков более толстыми и изменить их цвет? Или добавить эффект тени к границе флажка?

<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>
                    

Это изменяется после проверки действия (см. Изображение). Но я хочу, чтобы флажок всегда был таким. (перед проверкой. Всегда в нормальном состоянии)

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>