使用CSS自定义radio、checkbox样式的示例详解
程序员文章站
2022-04-01 17:35:37
...
以前做自定义样式的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 --> <p 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> </p>
/* 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; }
以上就是使用CSS自定义radio、checkbox样式的示例详解的详细内容,更多请关注其它相关文章!
上一篇: 使用CSS的margin属性在页面布局中的使用攻略介绍
下一篇: phalcon 利用注解实现验证
推荐阅读