在使用 Uniapp 进行应用开发时，我们常常会遇到需要对组件样式进行定制化的需求。其中，将默认的圆形 radio 组件改为方框样式，就是一个常见的需求。本文将详细介绍如何通过 CSS 样式来实现这一效果。
一、实现原理
在 Uniapp 中，radio 组件的样式是可以通过 CSS 进行修改的。我们主要是通过修改wx-radio-input这个类的样式来改变 radio 的外观。通过设置border-radius（边框圆角）属性，我们可以将圆形的 radio 变为方形。
二、代码实现
css
radio {
display: flex;
align-items: center;
justify-content: center;
}
radio.wx-radio-input{
width: 12px;
height: 12px;
border-radius: 10%;/* 圆角 */
}
/* 选中后的样式 */
.wx-radio-input.wx-radio-input-checked {
background-color: #007aff!important; /* 选中后的背景颜色 */
border-color: #007aff!important; /* 选中后的边框颜色 */
}
/* 选中后的内部对勾颜色，如果需要的话 */
.wx-radio-input.wx-radio-input-checked::before {
color: #ffffff; /* 对勾颜色，这里设置为白色以便在蓝色背景上可见 */
}上述代码中：
1、首先，通过radio选择器设置了 radio 组件的整体样式，使其内部元素水平和垂直居中。
2、 然后，使用radio.wx-radio-input选择器，针对 radio 组件的输入框进行样式设置，包括宽度、高度以及边框圆角。将border-radius设置为10%，可以让原本圆形的 radio 呈现出接近方形的外观。
3、 接着，wx-radio-input.wx-radio-input-checked选择器用于设置 radio 被选中后的样式，包括背景颜色和边框颜色。
4、 最后，wx-radio-input.wx-radio-input-checked::before选择器设置了选中后内部对勾的颜色。
三、注意事项
1、!important 的使用：在设置选中后的样式时，使用了!important声明，这是因为在 Uniapp 中，某些默认样式可能具有较高的优先级，使用!important可以确保我们自定义的样式生效。但是，在实际开发中应谨慎使用!important，以免造成样式冲突和难以维护的问题。
2、兼容性：虽然上述方法在大多数情况下都能正常工作，但不同的平台和设备可能对样式的解析存在细微差异。在开发过程中，要进行充分的测试，确保在各个目标平台上都能呈现出预期的效果。
通过上述步骤，我们就可以轻松地将 Uniapp 中的 radio 组件从圆形改为方形，满足项目的个性化需求。希望本文对你在 Uniapp 开发中有所帮助。如果在实践过程中遇到任何问题，欢迎在评论区留言讨论。