以前做自定义样式的radio, checkbox 的时候,一直是如下结构
<label>
<span class="diyRadio">
<input type="radio" name=" value="">
</span>
<span>文字</span>
</label>
然后定义diyRadio 的样式作为新Radio, 再用js 做关联。
知道今天才知道可以用<label></label>标签的for 属性 + :checked 做,纯CSS
( 真是太不应该了,学东西还是要认真、细致点。 )
DIY 单选项示例如下:
<!-- HTML -->
<div class="radio-beauty-container">
<label>
<span class="radio-name">radio1</span>
<input type="radio" name="radioName" id="radioName1" hidden/>
<label for="radioName1" class="radio-beauty"></label>
</label>
<label>
<span class="radio-name">radio2</span>
<input type="radio" name="radioName" id="radioName2" hidden/>
<label for="radioName2" class="radio-beauty"></label>
</label>
<label>
<span class="radio-name">radio3</span>
<input type="radio" name="radioName" id="radioName3" hidden/>
<label for="radioName3" class="radio-beauty"></label>
</label>
</div>
/* CSS */
.radio-beauty-container {
font-size: 0;
}
.radio-beauty-container .radio-beauty:hover, .radio-beauty-container input[type="radio"]:checked + .radio-beauty {
padding: 2px;
background-color: green;
background-clip: content-box;
}
.radio-beauty-container .radio-name {
vertical-align: middle;
font-size: 16px;
}
.radio-beauty-container .radio-beauty {
width: 18px;
height: 18px;
box-sizing: border-box;
display: inline-block;
border: 1px solid green;
vertical-align: middle;
margin: 0 15px 0 3px;
border-radius: 50%;
}
.radio-beauty-container .radio-beauty:hover {
box-shadow: 0 0 7px green;
}
效果:
http://codepen.io/jawil/pen/N...
( 示例作者:jawil(codepen) )
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。