只用CSS修改radio的原点样式
2017-04-14 14:43
387 查看
需要两个label,第一个label配合input,第2个label才是input的内容
HTML:
CSS:
HTML:
<input checked type="radio" id="radio-1" name="radio-1-set" class="regular-radio"/> <label for="radio-1"></label> <label class="inputlabel" for="radio-1">微信支付</label>
CSS:
.regular-radio { display: none; } .regular-radio + label { -webkit-appearance: none; background-color: RGB(248,248,249); padding: 9px; border-radius: 50px; /*padding: .09rem; border-radius: .5rem;*/ display: inline-block; position: relative; } .regular-radio:checked + label:after { content: ' '; width: 12px; height: 12px; border-radius: 50px; position: absolute; top: 3px; background: #E72F17; text-shadow: 0px; left: 3px; font-size: 32px; } .regular-radio:checked + label { background-color: #e9ecee; }
相关文章推荐
- input多选框checkbox单选框radio的样式修改-------CSS
- css修改默认的radio,checkbox样式
- CSS定义Input之Radio和Checkbox的样式
- 如何实现控制input的CSS但不影响CheckBox以及Radio的样式
- 修改css文件后,jsp页面在IE8中预览部分样式突然失效的原因
- css 与 jquery 配合实现重写radio组件样式
- css修改样式
- SharePoint Css样式修改
- sencha touch 扩展篇之使用sass自定义主题样式 (下)通过css修改官方组件样式以及自定义图标
- 本博客样式CSS,在BlackLowKey模板基础上修改
- CSS定义Input之Radio和Checkbox的样式
- 修改页面中所有TextBox控件的样式--CSS
- 控制input的CSS但不影响CheckBox以及Radio的样式
- jquery之修改元素样式(获取和设置样式,使用css(),width(),height()方法)
- JavaScript CSS修改学习第五章 给“上传”添加样式
- 修改鼠标样式的CSS代码
- 请问如何修改显示样式,该css吗?
- JavaScript CSS修改学习第二章 样式
- 通过修改CSS自定义chrome滚动条样式
- sencha touch 扩展篇之使用sass自定义主题样式 (下)通过css修改官方组件样式以及自定义图标