css3 - How to change the radio into the style of 2 selection buttons in the WeChat applet

Question

<radio-group>
        <label>
          <radio value="1" checked="checked" class="radio"/>demo1
          <radio style="margin-left: 40rpx;" value="2"/>demo2
          </label>
</radio-group>
          

I want to change the radio to the style of 2 buttons. As follows
If you use state binding, style={{color}} can only bind the color of the clicked button itself, and cannot remove the color of other buttons. What should I do?

Answer 1

You have fallen into a misunderstanding. Why do you have to use radio for single selection? The applet itself is also data-driven. As long as you ensure that the data status is correct, any component can assume the function of radio

Answer 2

May I ask the poster, how do you reset the style of the raido component of the mini program? I've tried several methods but can't seem to reset it. The screenshot you took shows that the radio component style has been reset successfully? Solve

---

I have found a way to reset the component style~

Answer 3

This is not a reset, just two buttons, a clever way to use data control status to simulate radio!