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)
Aucun commentaire:
Enregistrer un commentaire