Choose a group of radio buttons inside a container when a button is clicked

I have a bunch of containers containing radio buttons. The goal is for the container of a selected radio button to appear different:

input[type="radio"]:checked+.container {
  border: 5px solid red;
}
<div class="container">
  <input class="btn-radio" type="radio" value="123" name="rd" />
</div>


<div class="container">
  <input class="btn-radio" type="radio" value="1234" name="rd" />
</div>


<div class="container">
  <input class="btn-radio" type="radio" value="12345" name="rd" />
</div>

Why is it not functioning as expected?

csshtmlcss-selectors

Answer №1

Below is the functional code that I have elaborated on earlier

input[type="radio"]:checked + .border {
    border: 5px solid red;
}

.container {
    position: relative;
    max-width: 100px;
    margin: 10px;
}

input {
    position: relative;
    z-index: 100;
}

.border {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
<div class="container">
    <input class="btn-radio" type="radio" value="123" name="rd" />Input 1
    <div class="border"></div>
</div>
<div class="container">
    <input class="btn-radio" type="radio" value="1234" name="rd" />Input 2
    <div class="border"></div>
</div>
<div class="container">
   <input class="btn-radio" type="radio" value="12345" name="rd" /> Input 3
     <div class="border"></div>
</div>

Answer №2

One way to create a border around a container without adding new elements is by utilizing the ::before pseudo-element of the input. Best of luck implementing this solution!

.container {
  position: relative;
  margin-bottom: 2em;
}

input[type="radio"]:checked::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: 5px solid red;
}
    <div class="container">
      <p>container 123</p>
      <input class="btn-radio" type="radio" value="123" name="rd" />
    </div>


    <div class="container">
    <p>container 1234</p>
      <input class="btn-radio" type="radio" value="1234" name="rd" />
    </div>


    <div class="container">
    <p>container 12345</p>
      <input class="btn-radio" type="radio" value="12345" name="rd" />
    </div>

Answer №3

Instead of using a general selector, assign individual IDs to elements for better organization.

#individualID:checked + .specificContainer {
    border: 5px solid blue;
}

To achieve optimal results, consider assigning an ID to the container as well.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to understand the reason behind why the button is not being displayed

I'm having trouble with my quiz app. I have a button to submit answers and move on to the next question, but whenever I try to place it within the div that contains the quiz, the button disappears. Can someone please help me figure out what's wro ...

javascriptjqueryhtmlcss

Tips for positioning a mat-form-field beside an h1 tag

I've been attempting to place an h1 next to a mat-form-field from Angular Material, but I'm encountering some difficulties. Here's what I've attempted so far: <div class="mat-elevation-z8"> <mat-form-field> <mat-l ...

htmlcssangularangular-material

Div Boxes at the Center

I've searched extensively for a solution to my unique problem, but haven't been able to find one that fits. I have 4 div boxes with a max width of 50% and a min width of 400px. When the site is viewed on a smaller screen, I want the boxes to alig ...

htmlcss

Tips for positioning a Material UI Button and TextField side by side, perfectly aligned on the same line and height

I am currently working on aligning a <Button> from the Material UI library so that it is positioned at the same height as the <TextField> next to it and perfectly aligned with that field. Both the <Button> and the <TextField> are e ...

cssreactjsmaterial-ui

Creating a Background Image Using CSS3: A Step-by-Step Guide

Hey there! I'm trying to figure out how to recreate the image attached using CSS3. I've tried a few online tools for generating gradients, but no luck so far. :( I have the original image, but I really want to create the background using CSS3 in ...

cssbackground

The loading icon appears stuck and does not rotate on iOS version 15.3 and above, but functions properly on versions below 15.3

The loading icon does not spin on iOS versions > 15.3 or 16.1, but it works perfectly fine on lower iOS versions for iPhone and iPad, as well as on Android browsers. Below is the CSS code for reference. I've attempted using webkit for Safari and a ...

cssiosiphonecss-animationscss-transforms

What steps should I take to execute a unique function the very first time a user scrolls to a specific element?

The issue at hand: I am working with a sophisticated looping image carousel that needs to initiate - starting from a specified initial slide - as soon as the user scrolls to a specific division. It must not restart if the user scrolls up or down and then ...

javascriptjqueryhtmlcss

Altering the Size of Text in HTML

Currently I am working on my website and the title appears as follows <h1><font face="tempus sans itc" color="White"><div style="text-align:center">Welcome To My Website. View My Projects Here</h1></div> Is there a way to in ...

html

Text positioned in the center alongside an image, or if there is limited space, it will be aligned to

Take a look at this code snippet: img { float: left; } #inner { height: 128px; background-color: yellowgreen; display: table-cell; vertical-align: middle; } #content { background-color: red; } <img src="http://cdn.memegener ...

htmlcss

"Experience the power of Angular.js through seamless animations created by blending the capabilities

I want to smoothly fade out the old view and fade in the new view. The challenge is that the new content must be positioned absolutely until the old one fades out. I also want to set a specific top position and height for the new content, but when I try to ...

javascriptcssangularjsanimationcss-transitions

Ensure that the height of the div element is equal to 100% of

I've been trying to figure out how to make my div take up all of the vertical height of the screen, but I haven't found a simple solution in the 100% div height discussions. Can anyone help? Here's my code: CSS #mother { width: 100%; ...

htmlcssdomheight

Change the text inside a container without losing any associated event listeners using JavaScript or jQuery

Here is the HTML code: <div id="div001"> This is ${Row.1}. <p>${Row.2} explain something else.</p> <p>${Row.3} welcome you. <span>${Hello.World}, this is a new world.</span></p> </div> My objective is ...

javascriptjqueryhtml

CSS unable to modify the color of the switch in HTML code

I've been struggling to change the color of the Switch to yellow when it's turned on. Despite my attempts, I haven't been successful in doing so. Is it even possible to achieve this color change? <Switch size="small& ...

cssreactjsmaterial-ui

Mobile browsers are displaying fonts unevenly within tables

Currently in the process of developing a desktop site () that should function optimally on mobile browsers without the need for a separate mobile version. While mobile Safari scales up fonts in large text blocks, tables used for content are causing some is ...

htmlcss

"Help needed: The HTML dialog element is obstructing the invisible reCAPTCHA challenge popup. Any solutions for resolving this

Visit this link to access the example in incognito mode. Click on the "open" button to open the sample signin form, then click on the "Sign Up" button to trigger the challenge. There seems to be an issue with using recaptcha inside a dialog. I'm not ...

javascriptcssvue.jsrecaptchainvisible-recaptcha

particular shade for button border and background

I'm looking to create a button using Material UI that has a specific design. Right now, I've only been able to achieve this: https://i.stack.imgur.com/xvv7s.png Here is the code I am currently using. If anyone can help me identify what I'm ...

cssmaterial-ui

Eliminate any unnecessary or hidden spacing on the left side of the options within an HTML select

Currently, I am in the process of creating a Registration Form and encountering a challenge with aligning the input[type="text"] placeholder and the "pseudo" placeholder for a <select> element. My goal is to have both placeholders left-aligned flush ...

jqueryhtmlcss

The dropdown options for the input type file in Vuejs PWA are not appearing

I have created a Vue.js progressive web app that allows users to easily upload images from their mobile phones. While the app typically functions well, there is an issue where upon downloading the app to the homescreen, the image upload feature sometimes b ...

javascripthtmliosvue.jsprogressive-web-apps

What is the best way to fetch the id of the option that has been chosen from a bootstrap drop-down menu?

I recently created a basic drop-down list like this: https://i.sstatic.net/4Tlxx.png Here is the HTML code for it: <select class="form-control" id='0' (change)="retrieveValue($event.target)"> <option id='0'>{{ g ...

javascripthtmlangulartypescriptbootstrap-4

Initiate an animation in Wordpress once the entire page has finished loading

Recently, I incorporated some "raw html" elements with animations into my WordPress site. However, the issue I'm facing is that these animations kick off as soon as the page loads, without waiting for the preloader to complete and display the actual c ...

javascriptcsswordpressanimation