CSS click radio to switch between two image styles, and only one checked in multiple radio

Time:2020-9-24

We realize that the buttons that are clicked are in the red image style, that is, the other buttons that are not selected are in the gray image style. See the following picture styles:

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


<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 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. Note: (there are several key styles, others can be adjusted by themselves)

1) Hide the original style 2) replace the original style with the image using the URL property 3) about! Background size: cover property: enlarge the background image to fit the size of the element container. The proportion of the picture remains unchanged. However, it should be noted that the part beyond the container may be cut off. (similar to background size: 100% 100%) 5) select element: checked to set the selected style.

4. After the above steps, you can click radio to switch the image style, which is a part of address management. Click back to use Vue.js Address management is realized.

summary

The above is the CSS that Xiaobian introduced to you. Click radio to realize the switching of two image styles, and there can only be one checked in multiple radio. I hope it will help you. If you have any questions, please leave me a message, and the editor will reply to you in time. Thank you very much for your support to the developeppaer website! If you think this article is helpful to you, welcome to reprint, please indicate the source, thank you!