CSS clicks on the radio to switch between two image styles and only one of the multiple radios can be checked

We implement a red image style for the clicked button, and a gray image style for the other unselected buttons. See the following image style:

1. First, I create two radios here: (You can also declare more, the data here is normally obtained dynamically)

<input type="radio" name="defaultAddress" class="address_manager_content-d3-left-img" />
<input type="radio" name="defaultAddress" class="address_manager_content-d3-left-img" />

2. Add style to radio: CSS code:

.address_manager_content-d3-left-img{
 /* Hide the original style */
 appearance: none;
 -webkit-appearance: none;
 outline: none;
 /* Add new style: when not selected*/
 display: inline-block;
 width: 20px;
 height: 20px;
 position: static;
 margin : 15px 5px 0 0!important;
 background: url(/public/app/gzh/images/address_manager_wxz.png) no-repeat;
 background-size: cover;
}
.address_manager_content-d3-left-img:checked{/* When selected*/
   background: url(/public/app/gzh/images/address_manager_xz.png) no-repeat;
   background-size: cover;
}

3. Description: (There are several key styles, other styles can be adjusted by yourself)

1) Hide the original style 2) Replace the original style with the image using the url attribute 3) About! Important usage: This article of mine explains 4) background-size: cover attribute: enlarge the background image to a size that fits the element container. The image proportions remain unchanged, but please note that the part that exceeds the container may be cropped. (Similar to background-size: 100% 100%) 5) Select element: checked to set the selected style.

4. After completing the above steps, you can click the radio to switch the image style. This is part of address management. Click back to use Vue.js to implement address management.

Summarize

The above is the CSS that I introduced to you. Click on the radio to switch between two image styles, and only one of the multiple radios can be checked. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website! If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!