样式 angular-ui-bootstrap 复选框（标签）

Question

我在 Whosebug link but I didn't know how to apply it to the chekcbox from angular-ui 上发现了这种很酷的风格，它们是标签。

我尝试将它们添加为 classes，效果发生了变化，但活跃的 class 继续搞砸一切，它们看起来很奇怪。

Answer 1

这是工作插件...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: '14'; /*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>

样式 angular-ui-bootstrap 复选框（标签）

Styling angular-ui-bootstrap checkbox (label)

css

twitter-bootstrap

angular-ui