纯CSS 实现radio checkbox样式美化
来源:互联网 发布:淘宝现在改版了吗 编辑:程序博客网 时间:2024/05/17 21:50
我们知道CSS 是不能直接定义radio 标签和checkbox 标签的样式,但是默认的实在是太丑了,总要想办法来美化美化这货的。强大的CSS选择器可以帮助我们来实现美化。
首先我们看我们美化过的
再回顾下默认样式
可以亲自点一下!
约吗?
你喜欢的电影明星是?
真不知道晚上你会点哪个呢?
实现方法
HTML结构
<div> <p style="font-size:18px;margin-top:30px;color:rgba(0,0,0,0.44)">约吗?</p> <label class="demo--label"> <input class="demo--radio" type="radio" name="demo-radio"> <span class="demo--radioInput"></span>约 </label> <label class="demo--label"> <input class="demo--radio" type="radio" name="demo-radio"> <span class="demo--radioInput"></span>不约,叔叔我们不约 </label></div><div> <p style="font-size:18px;margin-top:30px;color:rgba(0,0,0,0.44)">你喜欢的电影明星是?</p> <label class="demo--label"><input class="demo--radio" type="checkbox" name="demo-checkbox1"> <span class="demo--checkbox demo--radioInput"></span>苍井空 </label> <label class="demo--label"> <input class="demo--radio" type="checkbox" name="demo-checkbox2"> <span class="demo--checkbox demo--radioInput"></span>波多野结衣 </label> <label class="demo--label"> <input class="demo--radio" type="checkbox" name="demo-checkbox3"> <span class="demo--checkbox demo--radioInput"></span>罗玉凤 </label></div>
CSS样式
.demo--label{margin:20px 20px 0 0;display:inline-block}.demo--radio{display:none}.demo--radioInput{background-color:#fff;border:1px solid rgba(0,0,0,0.15);border-radius:100%;display:inline-block;height:16px;margin-right:10px;margin-top:-1px;vertical-align:middle;width:16px;line-height:1}.demo--radio:checked + .demo--radioInput:after{background-color:#57ad68;border-radius:100%;content:"";display:inline-block;height:12px;margin:2px;width:12px}.demo--checkbox.demo--radioInput,.demo--radio:checked + .demo--checkbox.demo--radioInput:after{border-radius:0}
0 0
- 纯CSS 实现radio checkbox样式美化
- 纯CSS美化input radio和checkbox的样式
- 纯css3美化checkbox、radio默认样式
- css input checkbox和radio样式美化
- 纯CSS美化单复选框(checkbox、radio)
- 纯CSS美化单复选框(checkbox、radio)
- 纯CSS美化单复选框(checkbox、radio)
- css input[type=file] 样式美化 (radio checkbox类似)
- 最简单清晰的纯css实现的单选框radio复选框checkbox自定义样式
- 纯css自定义radio,checkbox样式,提高用户体验
- IFE糯米学院-checkbox和radio样式的美化实现
- 纯CSS3美化radio和checkbox
- 更改checkbox默认样式、radio默认样式,CSS实现自定义
- 【HTML】radio和checkbox样式美化
- 纯css改变radio样式
- 使用CSS美化radio和checkbox
- 使用CSS美化radio和checkbox
- 线CSS美化radio和checkbox
- JVM内存分布
- HDU 5785 Interesting(mancher+等差数列||回文树)
- 国际化
- 八大排序算法
- 关于Hibrenate OID说明
- 纯CSS 实现radio checkbox样式美化
- SQL 合并列值 拆分列值 拼接字符串
- 数据结构实验之查找七:线性之哈希表
- 数据结构实验之排序一:一趟快排
- 12步轻松搞定python装饰器
- 二级指针的用法
- hprof文件中导出图片
- 代码重构之解耦合
- Android M版本架构下wpa_supplicant分析