小程序单选按钮
<radio color="red" checked='true' class='radio' value='s'></radio> <radio color="#000" checked='true' class='radio sm' value='s'></radio> <radio color="#66666" checked='true' class='radio radio-full' value='s'></radio> <radio color="green" checked='true' class='radio radio-full sm' value='s'></radio> <radio color="rgba(0,0,0,0.5)" checked='true' class='radio react' value='s'></radio> <radio color="blue" checked='true'class='radio react sm' value='s'></radio> <radio color="#FF00FF" checked='true' class='radio react radio-full' value='s'></radio> <radio color="#e4393c" checked='true' class='radio react radio-full sm' value='s'></radio>
.radio { margin: 0; padding: 0; box-sizing: border-box; font-family: Helvetica Neue, Helvetica, sans-serif; } .radio { position: relative; } .radio .wx-radio-input { margin: 0; width: 24px; height: 24px; } .radio.react .wx-radio-input { border-radius: 10% !important; } .radio::before, .radio .wx-radio-input::before { display: none; } .radio[checked]::after { content: ""; background: transparent; display: block; position: absolute; width: 8px; height: 8px; z-index: 10; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto; border-radius: 50%; border: 8px solid #fff !important; } .radio.react[checked]::after { border-radius: 10%; } .radio.sm .wx-radio-input { margin: 0; width: 14px; height: 14px; } .radio.sm[checked]::after { top: 1px !important; right: 1px !important; width: 4px; height: 4px; border: 5px solid #fff !important; } .radio[class*="-full"][checked]::after { width: 16px; height: 16px; border: 4px solid #fff !important; } .radio.sm[class*="-full"][checked]::after { top: 1px; right: 1px; width: 8px; height: 8px; border: 3px solid #fff !important; } .radio.react[class*="-full"][checked]::after { width: 16px; height: 16px; border: 4px solid #fff !important; } .radio.react.sm[class*="-full"][checked]::after { top: 1px; right: 1px; width: 8px; height: 8px; border: 3px solid #fff !important; }