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

Popular posts from this blog

python - TypeError: start must be a integer -

c# - DevExpress RepositoryItemComboBox BackColor property ignored -

django - Creating multiple model instances in DRF3 -