如何通过注入自定义CSS实现单选框选中时修改指定标签背景色

Since you can only inject custom CSS and can't modify the HTML, here are two reliable approaches depending on your browser compatibility needs:

Approach 1: Use CSS :has() Selector (Recommended) #

This is the cleanest solution, leveraging modern CSS to target the parent container based on its child radio button state. It works in most modern browsers (Chrome, Edge, Safari, Firefox 120+).

/* Style for when "Agree" is checked */
.testclass:has(.radio-inline:nth-child(2) input:checked) .label-status {
  background-color: #d4edda; /* Soft green */
  color: #155724; /* Dark green text for contrast */
  padding: 2px 4px; /* Add subtle padding for better visuals */
  border-radius: 3px; /* Rounded corners */
}

/* Style for when "Disagree" is checked */
.testclass:has(.radio-inline:nth-child(3) input:checked) .label-status {
  background-color: #f8d7da; /* Soft red */
  color: #721c24; /* Dark red text for contrast */
  padding: 2px 4px;
  border-radius: 3px;
}

How It Works: #

• The :has() pseudo-class lets us select the .testclass container only when it contains a checked radio button inside the specified .radio-inline label.
• .radio-inline:nth-child(2) targets the label wrapping the "Agree" radio, while .radio-inline:nth-child(3) targets the "Disagree" one.
• We then apply the background color and text styling directly to the .label-status element inside that targeted container.

Approach 2: Flex Order Trick (For Older Browser Compatibility) #

If you need to support browsers that don't yet support :has(), you can rearrange the visual order of elements using flexbox, allowing us to use sibling selectors that only work forward in the DOM.

/* Turn the container into a flex box */
.testclass {
  display: flex;
  align-items: center;
  gap: 10px; /* Add spacing between elements */
}

/* Adjust visual order so Status stays first, but moves to end of DOM flow */
.testclass .label-status {
  order: 1;
}
.testclass .radio-inline:nth-child(2) {
  order: 2;
}
.testclass .radio-inline:nth-child(3) {
  order: 3;
}

/* Style Status when Agree is checked */
.testclass .radio-inline:nth-child(2) input:checked ~ .label-status {
  background-color: #d4edda;
  color: #155724;
  padding: 2px 4px;
  border-radius: 3px;
}

/* Style Status when Disagree is checked */
.testclass .radio-inline:nth-child(3) input:checked ~ .label-status {
  background-color: #f8d7da;
  color: #721c24;
  padding: 2px 4px;
  border-radius: 3px;
}

How It Works: #

• We set .testclass as a flex container and use the order property to keep the "Status" label visually first, but move it to the end of the DOM flow relative to the radio buttons.
• This lets us use the ~ sibling selector to target the .label-status element after a checked radio button, since sibling selectors only work on elements that come later in the DOM.

Both approaches will modify the .label-status background color based on which radio button is checked, without needing to alter the original HTML.

内容的提问来源于stack exchange，提问作者BeefBarrier