css - Styling angular-ui-bootstrap checkbox (label) -
i found cool style here on stackoverflow link didn't know how apply chekcbox angular-ui, they're labels.
i tried adding them classes, effect has changed active class keep on messing everything, , looked weird.
here working plunkr...http://plnkr.co/edit/6cfc73jztwujuqwntrwr?p=preview
basically add css,
.btn-primary { background: url('http://lorempixel.com/output/people-q-c-50-50-1.jpg') no-repeat; height: 50px; width: 50px; display: block; border-radius: 50%; position: relative; transition: 0.4s; border: solid 5px #fff; box-shadow: 0 0 1px #fff; /* soften jagged edge */ } /* provide border when hovered , when checkbox before checked */ .btn-primary:hover, .btn-primary.active, .btn-primary:focus{ border: solid 5px #f00; box-shadow: 0 0 1px #f00; /* soften jagged edge */ } /* - create pseudo element :after when checked , provide tick - center content */ .btn-primary.active::after { content: '\2714'; /*content required, though can empty - content: '';*/ display: block; height: 1.5em; width: 1em; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; color: #f00; } .btn-primary.active{ background: url('http://lorempixel.com/output/people-q-c-50-50-1.jpg') no-repeat; }
whereas in html,
<button type="button" class="btn btn-primary" ng-model="singlemodel" btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0"></button>
Comments
Post a Comment