uni-app应⽤中单选按钮⾃定义样式1（实⼼圆点）
⼤家在开发uniapp时，应该都⽤过radio组件，也⽤过uview⾥的u-radio。在⼀般设计中都是实⼼圆点或者空⼼圆的选择状态，但是这⾥的radio是"对号"。在这⾥我把我做的样式分享⼀下，希望能够帮到⼤家。
<style lang="scss">
htmlradio设置默认的按钮/* 注意要写在第⼀⾏，同时给style标签加⼊lang="scss"属性 */
@import "uview-ui/index.scss";
.uni-radio-wrapper .uni-radio-input {
background-color: transparent;
border: 3px solid rgb(0, 122, 255);
}
.uni-radio-wrapper .uni-radio-input.uni-radio-input-checked {
background-color: rgba($color: #000000, $alpha: 0) !important;
border: 3px solid rgb(170, 170, 0);
position: relative;
&::before {
display: inline-block;
content: '';
width: 70%;
height: 70%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: rgb(0, 122, 255);
border: none;
border-radius: 50%;
}
}
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。