造型angular-ui-bootstrap複選框（標籤）

Question

我在這裏找到了這個很酷的樣式在stackoverflow link，但我不知道如何將它應用到angular-ui的chekcbox，以及它們是標籤。

我試着將它們添加爲類，效果已經改變，但活動類繼續搞亂一切，而且看起來很奇怪。

Answer 1

這裏是工作plunkr ... http://plnkr.co/edit/6CFc73JZTWujUQWnTrWr?p=preview

基本上只是添加這個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: all 0.4s; 
    border: solid 5px #FFF; 
    box-shadow: 0 0 1px #FFF; /* Soften the jagged edge */ 
} 
/* Provide a border when hovered and when the checkbox before it is checked */ 
.btn-primary:hover, 
.btn-primary.active, 
.btn-primary:focus{ 
    border: solid 5px #F00; 
    box-shadow: 0 0 1px #F00; /* Soften the jagged edge */ 
} 
/* 
- Create a pseudo element :after when checked and provide a tick 
- Center the content 
*/ 
.btn-primary.active::after { 
    content: '\2714'; /*content is required, though it can be 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; 
} 

而在HTML，

<button type="button" class="btn btn-primary" ng-model="singleModel" btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0"></button>