单选框 - 默认

单选框 - 扩展边框

单选框 - 扩展背景

单选框 - 扩展圆角

单选框 - 圆点

单选框 - 扩展边框

单选框 - 扩展背景

单选框 - 扩展圆角

使用方法:

<div class="yo-checked"> <input type="radio" name="project" checked /> <span class="type"></span> </div> <div class="yo-checked"> <input type="radio" name="project" /> <span class="type"></span> </div>

假设你想要多种风格,只需这样扩展:

@include yo-checked( $name: test, $border-color: #4a87ee, $radius: 50% );

使用方法:

<div class="yo-checked yo-checked-test"> <input type="radio" name="project" /> <span class="type"></span> </div>

复选框 - 默认

复选框 - 扩展边框

复选框 - 扩展背景

复选框 - 扩展圆角

复选框 - 圆点

复选框 - 扩展边框

复选框 - 扩展背景

复选框 - 扩展圆角

使用方法:

<div class="yo-checked"> <input type="checkbox" name="project" checked /> <span class="type"></span> </div> <div class="yo-checked"> <input type="checkbox" name="project" /> <span class="type"></span> </div>

假设你想要多种风格,只需这样扩展:

@include yo-checked( $name: test, $border-color: #4a87ee, $radius: 50% );

使用方法:

<div class="yo-checked yo-checked-test"> <input type="checkbox" name="project" /> <span class="type"></span> </div>