单选框
单选框
代码演示
单选
默认单选
简单的栗子
组合
默认
用.radio-wrapper包裹，可以得到一个radio。
<label class="radio-wrapper" for="radio">
<input type="radio" id="radio">默认
</label>
<label class="radio-wrapper" for="radio1">
<input type="radio" id="radio1" checked>默认已选
</label>
<label class="radio-wrapper" >
<input type="radio" name="radio" disabled >不可选
</label>
<label class="radio-wrapper radio-right" >
<input type="radio" name="radio" > 我已阅读<a>《协议链接》</a>
</label>组合
已经为你封装好单选框的组合实例。结合列表组件。
<div class="list-ord">
<label for="r13" class="list-label-wrapper">
<div class="list-item list-item-middel list-nowrap">
<div class="list-content txt-nowrap ">
<div class="list-title txt-nowrap">选项一</div>
</div>
<div class="list-extra">
<span class="radio-wrapper radio-right" >
<input type="radio" name="radio" id="r13">
</span>
</div>
</div>
</label>
<label for="r3" class="list-label-wrapper">
<div class="list-item list-item-middel list-nowrap">
<div class="list-content txt-nowrap ">
<div class="list-title txt-nowrap">选项二</div>
</div>
<div class="list-extra">
<span class="radio-wrapper radio-right" >
<input type="radio" name="radio" id="r3">
</span>
</div>
</div>
</label>
<label for="r4" class="list-label-wrapper">
<div class="list-item list-item-middel list-nowrap">
<div class="list-content ">
<div class="list-title txt-weak">不可选</div>
<div class="list-brief txt-nowrap">辅助文字内容</div>
</div>
<span class="radio-wrapper radio-right" >
<input type="radio" name="radio" id="r4" disabled>
</span>
</div>
</label>
</div>