单选框 - 默认

单选框 - 扩展边框

单选框 - 扩展背景

单选框 - 扩展圆角

单选框 - 圆点

单选框 - 扩展边框

单选框 - 扩展背景

单选框 - 扩展圆角

使用方法:

<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, $bordercolor: #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, $bordercolor: #4a87ee, $radius: 50% );

使用方法:

<div class="yo-checked yo-checked-test"> <input type="checkbox" name="project" /> <span class="type"></span> </div>
@include yo-checked(
    $name:default, //{String} 定义名称
    $content:default, //{String} 选中时的标记内容
    $size:default, //{Length} 元件大小
    $font-size:default, //{Length} 定义标记大小
    $border-width:default, //{Length} 边框厚度
    $bordercolor:default, //{Color} 定义边框色
    $bgcolor:default, //{Color} 定义背景色
    $color:default, //{Color} 定义标记色
    $on-bordercolor:default, //{Color} 定义激活时边框色
    $on-bgcolor:default, //{Color} 定义激活时背景色
    $on-color:default, //{Color} 定义激活时标记色
    $radius:default //{Length} 定义圆角大小
)