css修改单选按钮样式

功能需要选择支付方式—css实现选中单选按钮样式切换

如图所示

上代码

// 代码片段为选择支付方式模块
// 原生效果<div class="order-pay pd border"><div class="label">请选择支付方式</div><div class="item"><input class="check" type="radio" id="wx" name="item" value="选项一"/><div class="check-back"></div><label for="wx"><div class="img"><img src="./img/weixin.png" alt=""></div><div class="method">微信支付</div></label></div><div class="item"><input class="check" type="radio" id="zfb" name="item" value="选项二"/><div class="check-back"></div><label for="zfb"><div class="img"><img src="./img/zfb.png" alt=""></div><div class="method">支付宝支付</div></label></div></div>

/* rem为移动端单位 */
/* order-pay */
.order-pay{padding: .3rem .2rem;
}
.order-pay .label{color: #808080;
}
.order-pay .item{position: relative;height: 1rem;line-height: 1rem;text-align: center;display: flex;
}
.order-pay .item input{width: .4rem;height: .4rem;margin-top: .35rem;
}
.order-pay .img{margin: 0 .2rem;
}
.order-pay img{width: .4rem;height: .4rem;vertical-align: middle;
}
.order-pay label{height: 1rem;line-height: 1rem;width: 100%;display: flex;margin-left: .45rem;
}
.order-pay .method{color: #666666;
}
.check{width: .4rem;height: .4rem;position: absolute;opacity: 0;z-index: 3;
}
.check-back{width:.4rem;height:.4rem;position: absolute;background: url("./img/check.png");background-size: contain;background-repeat: no-repeat;z-index: 2;top: .35rem;
}
.item input:checked + .check-back{background: url("./img/checked.png");background-size: contain;background-repeat: no-repeat;
}
.pay-btn{width:6.8rem;height:1rem;line-height: 1rem;text-align: center;background:rgba(233,86,26,1);color: #fff;border-radius:8px;margin: .2rem auto;
}

css修改单选按钮样式相关推荐

vue、css修改滚动条样式
vue.css修改滚动条样式样式为 /* 滚动条 */ body *::-webkit-scrollbar {width: 10px;height: 10px; } body *::-webkit- ...
html单选按钮自定义,css | radio单选按钮样式自定义
radio单选按钮默认样式改变,radio默认样式确实有点丑,而且不能适合所有的UI设计稿,现在UI稿的花样是越来越多了,所有使用css自定义radio单选按钮样式还是很重要的. 单选按钮最常见的地方 ...
通过CSS修改checkbox样式(利用label的for属性进行焦点传递)
需求背景: 在页面设计时,常常会用到input复选框.如果用到一些前端框架的话,一般复选框的样式都可以满足需要:但是对于未使用前端框架,直接原生的话样式可能满足不了项目需要,因此我们需要修改复选框的样 ...
html5滚动条样式修改,css修改滚动条样式
在css中怎样改变滚动条的样式 /*IE滚动条颜色设置*/body {scrollbar-arrow-color:#f2f2f3;/*上下箭头*/scrollbar-track-color:#1589 ...
React中 css修改滚动条样式
第一个 HTML代码: <div class="element">内容 </div> CSS代码: .element{overflow-y: scroll; ...
css修改input样式
修改input样式(图片覆盖) 效果图修改前修改后思路使用一张图片,将input标签和img标签放在同一个容器将input标签width和height 放大,之后用input完全覆盖图片将 ...
css 修改滚动条样式
推荐直接看这篇文章: css3自定义滚动条样式写法  .test{height:100px;overflow: auto; } .test::-w ...
CSS修改滚动条样式
滚动条的默认样式: 滚动条样式修改: ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-button 滚动条两端的按钮 (设置滚动条整体样式,两端按 ...
去除滚动条去除滚动条样式 css修改滚动条样式
如何去除滚动条并保留滚动功能 1.首先如果是超出其中一边滚动,另一边不能滚动的话,可以直接写明超出某一边的样式,比如: overflow-y:scroll 2.如果是两边都可以滚动的话,就给父级添加伪 ...
CSS 修改滚动条样式隐藏浏览器滚动条
/* 滚动条整体部分 */ div::-webkit-scrollbar {} /* 滚动条里面的滑块 */ div::-webkit-scrollbar-thumb {}/* 滚动条的轨道的两端按钮 ...

css修改单选按钮样式

功能需要选择支付方式—css实现选中单选按钮样式切换

css修改单选按钮样式相关推荐

最新文章

热门文章