uniapp中radio默认样式怎么取消?
时间: 2023-11-25 08:08:22 浏览: 98
radio点击事件修改样式
你可以在样式中设置 `uni-radio` 组件的 `appearance:none` 属性来取消其默认样式,如下所示:
```css
uni-radio {
appearance: none;
}
```
另外,你还可以根据自己的需求,对 `uni-radio` 组件进行自定义样式。例如,定义一个新的类名 `.my-radio`,然后在样式中设置该类名的样式:
```css
.my-radio input[type="radio"] {
/* 取消默认样式 */
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
/* 自定义样式 */
width: 20px;
height: 20px;
border: 1px solid #ccc;
border-radius: 50%;
outline: none;
cursor: pointer;
}
.my-radio input[type="radio"]:checked:after {
/* 选中样式 */
content: "\2713";
display: block;
color: #fff;
background-color: #007aff;
border-radius: 50%;
width: 16px;
height: 16px;
line-height: 16px;
text-align: center;
font-size: 12px;
margin: 2px;
}
```
然后在 `uni-radio` 组件上添加 `class` 属性,值为 `my-radio`,即可应用自定义样式:
```html
<uni-radio class="my-radio" value="1">选项1</uni-radio>
<uni-radio class="my-radio" value="2">选项2</uni-radio>
<uni-radio class="my-radio" value="3">选项3</uni-radio>
```
阅读全文