uniapp单选按钮样式
时间: 2023-09-21 18:14:14 浏览: 143
Uniapp 各类 button按钮
您可以使用以下样式来自定义uniapp中单选按钮的样式:
1. 首先,在您的样式文件中引入uview组件库的scss文件(注意要将lang属性设置为"scss")。
2. 然后,使用以下样式来修改单选按钮的外观:
```
.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%; // 设置对号为圆形
}
}
```
这样,您就可以根据自己的需求来自定义uniapp中单选按钮的样式了。希望对您有所帮助!
阅读全文