改变radio默认选中颜色

之前都是用雪碧图进行radio选中图片的切换，现在选择这种比较容易的css样式切换。
html代码部分：
<div class="choose"><label class="radio">选项1<input type="radio" name="radio" value="1" checked><i></i></label><label class="radio">选项2<input type="radio" value="2" name="radio"><i></i></label>
</div>
css样式：

.choose {position: relative;
}.choose .radio {position: relative;display: inline-block;font-weight: 400;color: #0c4757;padding-left: 25px;cursor: pointer;
}.choose .radio input {position: absolute;left: -9999px;
}.choose .radio i {display: block;position: absolute;top: 6px;left: 0;width: 15px;height: 15px;outline: 0;border: 1px solid #e4e4e4;background: #ffffff;border-radius: 50%;transition: border-color .3s;-webkit-transition: border-color .3s;
}.choose .radio input + i:after {position: absolute;content: '';top: 3px;left: 3px;width: 9px;height: 9px;border-radius: 50%;background-color: #ff5d5b;opacity: 0;transition: opacity .1s;-webkit-transition: opacity .1s;
}.choose .radio input:checked + i:after {opacity: 1;
}

改变radio默认选中颜色相关推荐

如何获取select中的value、text、index相关值如何获取单选框中radio值触发事件 radio 默认选中...
如何获取select中的value.text.index相关值 select还是比较常用的一个标签,如何获取其中的内容呢? 如下所示: <select id="select" ...
html radio 默认选中
设置html radio 默认选中的方法:添加checked 属性,设置为 true,如下代码所示: <input checked="true" type="rad ...
修改radio的选中颜色为红色
修改radio选中颜色为蓝色 <!DOCTYPE html> <html> <head><meta charset="utf-8"> ...
JS中设置input的type=radio默认选中
html: <input id="Radio1" type="radio" value="男" name="st_Sex&q ...
layui 查看编辑页面，radio 默认选中状态
/*** @param form* @param 更新全部表单*/ function reloadFrom() {layui.use(["form"],function () {v ...
页面初始化设置单选框radio默认选中，清空默认选中
前言: 页面初始化设置单选框radio默认选中,根据公司已有的标签属性来写的,坑,刚开始一直获取不到这个圆框框,搞了半天,终于搞定了. 浏览器截图: js代码: 产品的name是由uuid生成的: $ ...
jQuery设置radio默认选中状态及获取选中值
jQuery设置radio默认选中状态及获取选中值 //获取选中值 var rechargeType = $("input[name='rechargeType']:checked" ...
checkbox或者radio默认选中，默认不可选中
checkbox: 默认选中 <input id="checkbox1" type="checkbox" checked="checked&qu ...
html radio 去掉圆点,html radio默认选中，去除选中
radio 是 html 的一个单选框,所谓单选框就是一次只能选择一项,复选框一次才能选择多项.radio 大多用于只有两个选择项的情况,例如性别只有男女两项,当然也可以用于有多个选项的情况. 在网页 ...

改变radio默认选中颜色

改变radio默认选中颜色相关推荐

最新文章

热门文章