css 单选框样式调整
2017-11-21 10:13
267 查看
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { padding: 0; margin: 0; } .radio { display: inline-block; } label { display: inline-block; padding: 10px 10px; line-height: 20px; position: relative; border: 1px solid #ccc; cursor: pointer; } .radio .option { width: 10px; height: 10px; display: inline-block; border: 1px solid #ccc; border-radius: 50%; position: relative; } .option-span { position: absolute; top: 2px; left: 2px; width: 6px; height: 6px; background: #fff; border-radius: 50%; } .radio input[type="radio"] { display: none; } input[type="radio"]:checked+.option{ border: 1px solid #57a3f3; background: #57a3f3; } </style> </head> <body> <div class="radio"> <label> <input type="radio" name="sex" value="" /> <span class="option"><span class="option-span"></span></span><!--优化后的单选框样式--> <span>男</span> </label> </div> <div class="radio"> <label> <input type="radio" name="sex" value="" /> <span class="option"><span class="option-span"></span></span><!--优化后的单选框样式--> <span>女</span> </label> </div> </body> </html>
相关文章推荐
- 有关IE和火狐CSS样式差异调整的相关问题(别从网上复制粘贴)
- 用css实现手机端单选框的样式改变
- CSS+DIV调整图片样式垂直居中
- 纯css设置单选框/进度条样式
- CSS 实现自定义样式的单选框与多选框
- 自学篇之-----纯css做的漂亮的单选框复选框样式
- 用css将一行文字顺时针旋转九十度的办法【样式如图,具体情况具体调整】
- 使用css美化单选框(radio)和复选框(checkbox)的样式
- 关于css界面样式快速调整问题
- js 获取浏览器版本以此来调整CSS的样式
- css修改单选框与复选框样式
- 调整文本输入框placeholder的颜色等样式
- AngualrJS(九)css类和样式2
- CSS哪些样式属性不可以被子元素继承?
- 精通 CSS+DIV 网页样式与布局 94
- UITabelView分组样式时如何调整组之间的间距
- Css 打印样式
- 关于样式重置reset.css
- CSS自定义滚动条样式