微信小程序開發中,單選框是經常用到的表單組件之一。通過CSS樣式控制單選框的外觀和樣式可以實現更加個性化的UI效果。
/* 單選框外層容器樣式 */
.radio-container {
display: flex;
align-items: center;
}
/* 單選框的樣式 */
.radio {
display: inline-block;
position: relative;
margin-right: 10px;
width: 16px;
height: 16px;
border: 1px solid #ccc;
border-radius: 50%;
background-color: #fff;
cursor: pointer;
}
/* 單選框的選擇樣式 */
.radio.selected::after {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
border-radius: 50%;
transform: translate(-50%, -50%);
background: #007aff;
}
/* 隱藏原生單選框 */
.radio input[type="radio"] {
display: none;
}
以上是一個簡單的單選框樣式代碼示例。其中,.radio-container
是單選框的外層容器樣式,.radio
是單選框的樣式,.radio.selected::after
是單選框被選中時的樣式。
除此之外,還可以通過CSS樣式控制單選框的hover效果、disabled狀態等等。通過巧妙運用CSS樣式,可以讓單選框與頁面的整體風格相融合,增強用戶體驗。