css 单选框样式调整

来源：互联网发布：js如何获取classname 编辑：程序博客网时间：2024/06/05 11:44

<!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>

阅读全文

0 0