自定義小程序單選框的樣式

在小程序中，自定義單選框樣式需要結合小程序的組件和樣式定義進行操作。以下是一種常見的自定義單選框樣式方法：

apple-system, ""> 1. 使用<radio-group>和<radio>組件

小程序提供了<radio-group>和<radio>組件來實現單選框功能，但默認樣式較為簡單。要自定義樣式，可以通過以下步驟：

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

	
	

		htmlCopy 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. 定義自定義樣式

	
	

		cssCopy code
	

	

		/* 自定義單選框樣式 */ .custom-radio {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
} /* 自定義選中樣式 */ .custom-radio radio:checked+.radio-class {
  /* 自定義選中樣式 */ }
	

2. 使用CSS和偽類選擇器自定義樣式

你也可以使用CSS樣式和偽類選擇器來自定義單選框的樣式，例如：

	
	

		htmlCopy 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> <!-- 更多選項 --> 
	

	
	

		cssCopy 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;
}
	

以上代碼提供了一種自定義單選框樣式的基本思路，你可以根據實際需求和設計風格，自行調整樣式和效果。