自定义小程序单选框的样式

在小程序中，自定义单选框样式需要结合小程序的组件和样式定义进行操作。以下是一种常见的自定义单选框样式方法：

1. 使用<radio-group>和<radio>组件

小程序提供了<radio-group>和<radio>组件来实现单选框功能，但默认样式较为简单。要自定义样式，可以通过以下步骤：

a. 添加<radio-group>和<radio>组件

html
Copy code
<
radio-group
 
bindchange
=
"radioChange"
>
   
<
label
 
class
=
"custom-radio"
>
     
<
radio
 
value
=
"1"
>
</
radio
>
     选项1  
</
label
>
   
<
label
 
class
=
"custom-radio"
>
     
<
radio
 
value
=
"2"
>
</
radio
>
     选项2  
</
label
>
   
<!-- 更多选项 -->
 
</
radio-group
>
 

b. 定义自定义样式

css
Copy code
/* 自定义单选框样式 */
 
.custom-radio
 {  
display
: flex;  
align-items
: center;  
margin-bottom
: 
10px
;} 
/* 自定义选中样式 */
 
.custom-radio
 radio
:checked
+
.radio-class
 {  
/* 自定义选中样式 */
 }

2. 使用CSS和伪类选择器自定义样式

你也可以使用CSS样式和伪类选择器来自定义单选框的样式，例如：

html
Copy code
<
label
 
class
=
"custom-radio"
>
   
<
input
 
type
=
"radio"
 
name
=
"option"
 
value
=
"1"
>
   选项1 
</
label
>
 
<
label
 
class
=
"custom-radio"
>
   
<
input
 
type
=
"radio"
 
name
=
"option"
 
value
=
"2"
>
   选项2 
</
label
>
 
<!-- 更多选项 -->
 

css
Copy code
/* 自定义单选框样式 */
 
.custom-radio
 {  
display
: flex;  
align-items
: center;  
margin-bottom
: 
10px
;} 
/* 隐藏原生单选框 */
 
.custom-radio
 
input
[type=
"radio"
]
 {  appearance: none;  -webkit-appearance: none;  -moz-appearance: none;  
width
: 
16px
;  
height
: 
16px
;  
border
: 
1px
 solid 
#ccc
;  
border-radius
: 
50%
;  
outline
: none;  
cursor
: pointer;} 
/* 选中状态样式 */
 
.custom-radio
 
input
[type=
"radio"
]
:checked
 {  
background-color
: 
#007bff
;}

以上代码提供了一种自定义单选框样式的基本思路，你可以根据实际需求和设计风格，自行调整样式和效果。