Add a border to the image when the radio button is selected

Question

Add a border to the image when the radio button is selected

I am attempting to add a border to an image when a radio button is checked.

Here is the HTML code I am working with:

<div class="frm_radio">
  <label for="field_n9r1a2-0">
    <input type="radio" name="x" id="t" value="Betreuung">
    Betreuung 
    <img src="/wp-content/uploads/2016/03/unterichten_betreuen.jpg">
  </label>
</div>

I have tried using the CSS selector :checked but it does not seem to be working as expected.

input[type=radio]:checked img {
    border: 2px solid red;
}

Could someone provide guidance on how to properly solve this issue?

html css

Answer 1

Answer №1

Remember to include the ~ (sibling) operator in your CSS code:

input[type=radio]:checked ~ img {
    border: 2px solid red;
}

If you omit the ~, the browser will interpret the radio button as the parent of the image element. In such cases where no text is present, consider using the + selector instead.

input[type=radio]:checked ~ img {
    border: 2px solid red;
}

<div class="frm_radio">
  <label for="field_n9r1a2-0">
    <input type="radio" name="x" id="t" value="Betreuung">
    Betreuung 
    <img src="/wp-content/uploads/2016/03/unterichten_betreuen.jpg">
  </label>
</div>

Answer 2

Remember to include the ~ (sibling) operator in your CSS code:

input[type=radio]:checked ~ img {
    border: 2px solid red;
}

If you omit the ~, the browser will interpret the radio button as the parent of the image element. In such cases where no text is present, consider using the + selector instead.

input[type=radio]:checked ~ img {
    border: 2px solid red;
}

<div class="frm_radio">
  <label for="field_n9r1a2-0">
    <input type="radio" name="x" id="t" value="Betreuung">
    Betreuung 
    <img src="/wp-content/uploads/2016/03/unterichten_betreuen.jpg">
  </label>
</div>

Add a border to the image when the radio button is selected

Answer №1

Similar questions

Steps for adding a Bootstrap Navbar Dropdown1. Begin by creating

Animating a div using a changing scope variable in AngularJS

Position a div element after another using the :after pseudo-element

The "initialized" event in angular2-tree-component fires prior to the data being loaded

Searching for "available accommodations" requires guidance on logic

Centered at the bottom of the screen lies a Bootstrap button

JavaScript is unable to bring in an npm module

Creating a centered vertical border in Tailwind between two divs can be achieved by following these steps

Achieving a full-width navigation element allows for other elements to be positioned below it, rather than directly beside it

What is the best way to retrieve data from a Python file and display it in HTML?

The webpage freezes when attempting to run jQuery with Selenium

Using Python's Beautiful Soup library to retrieve text from h1 and id tags

HTML5 Audio Recording Tools (including a built-in Audio Player)

Animating the appearance and behavior of radio buttons using CSS transitions and JavaScript

Navigate to a hyperlink using an HTML tag on an Android device

What are some ways to customize the appearance of my ReactJS application while it's being viewed on Chrome on

Is my utilization of Flexbox and media queries incorrect?

Analyzing an HTML document

Calculate the total sum of selected values in a multiple select dropdown using jQuery

Arrange content from database in collapsible Bootstrap 4 cards