jeudi 7 mars 2019

make the border thicker and change color or give shadow effect on awesome-bootstrap-checkbox?

I am using 3 awesome-bootstrap-checkboxs( https://github.com/flatlogic/awesome-bootstrap-checkbox ) without label.
but my client want to be differenciated with the colors of the checkboxes before it checked. I tried to change border-color and box-shadow but it was not succeeded. ( Yes I am not good in css. ) Franckly I can't know what target object I shoulde give css effect.

Is it possible to make the borders of awesome check boxes thicker and change color? or give shadow effect to border of checkbox?

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

it is changed like this after check action.(image) I want to make checkbox always like this.(before it checked. always in normal status)

enter image description here




Aucun commentaire:

Enregistrer un commentaire