Is there a way to apply a consistent border to both the input radio button and its corresponding label once the radio button has been selected

CSS:

<div class="form-check fs-3 mb-3">
  <input id="first_question" name="first_question" type="radio" value="n">
  <label for="first_question">no</label>
</div>

Is there a way to apply the same border style to both the input radio button and its label after the radio has been checked?

I've attempted to use the following CSS:

.form-check:checked{
border:2px solid red;
border-radius: 4px;
color:red;
}

and:

.form-check::after{
border:2px solid red;
border-radius: 4px;
color:red;
}

However, neither of these solutions seem to be working. Can anyone offer some assistance?

javascripthtmlcssbootstrap-4frontend

Answer №1

It appears that the :has() selector may not be fully supported in all web browsers. To experiment with this, you can view the codepen demo across different browsers.

.form-check:has(> #first_question:checked){
  display: inline-flex;
  padding: 10px 50px;
  border: 2px solid red;
  border-radius: 30px;
}

#first_question:checked:after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 5px solid red;
    border-radius: 50%;
    top: -4px;
    left: -4px;
    position: relative;
    background-color: white;    
}

#first_question:checked + label{
  margin-left: 5px;
}
<div class="form-check fs-3 mb-3">
  <input id="first_question" name="first_question" type="radio" value="n">
  <label for="first_question">Excellent</label>
</div>

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

Vue and Axios encountered a CORS error stating that the 'Access-Control-Allow-Origin' header is missing on the requested resource

I've encountered the error above while using Axios for a GET request to an external API. Despite consulting the Mozilla documentation, conducting thorough research, and experimenting with different approaches, I haven't made any progress. I&apos ...

javascriptgetcorsvue.jsaxios

What is the best way to extract the text inside a div element based on the input value in a

I attempted to extract the innerText of a div along with the input values within it. For instance: <div> My name is Shubham, I work for <input type="text"/> for the last 5 years.</div> My objective is to retrieve all the text ...

javascripthtmlreactjs

Firebase is not updating the number

Having just started with Firebase, I have been following all the guidelines for web Firebase auth. I have successfully managed to login, log out, and update all data except for the phone number. Despite receiving a success message in the console, my phone ...

javascriptnode.jsfirebasereact-nativefirebase-authentication

Establishing a secondary setTimeout function does not trigger the execution of JQUERY and AJAX

// Custom Cart Code for Database Quantity Update $('.input-text').on('keydown ' , function(){ var tr_parent = $(this).closest("tr"); setTimeout(function () { $(tr_parent).css('opacity', '0.3'); }, 4000); var i ...

javascriptjquerycssajax

Vite and Transloadit encountered a type error: Unable to access properties of undefined when trying to read 'Resolver'

Currently, I am developing a Vite application using Vue 3.x that involves interactions with images/PDFs through Transloadit. While working on creating my own plugin for Transloadit integration, I encountered some issues. Initially, I managed to resolve an ...

javascriptvue.jsvuejs3vitetransloadit

A step-by-step guide on storing JSON data into a variable using NodeJS

Just starting out with Node.js and running into an issue. I need to figure out how to extract and save data from a JSON object retrieved from the GitHub API. var http = require("http"); var express = require('express'); var app = express(); var ...

javascriptnode.jsexpress

Add a css class to a <div> that is created by an <ng-template> inside the <ngx-datatable-column> element

I am struggling to implement the display: flex style on the parent <div> containing my <span> However, since the <span> is dynamically generated by the ng-template of the ngx-datatable-column, I'm finding it challenging to apply thi ...

htmlcssangularsass

Adjusting Iframe Dimensions Dynamically with Javascript based on Anchor Location

I am experienced with handling this issue in flash, but I am struggling to figure out how to do it using Javascript and CSS. The problem involves an iframe that does not have an overflow property, and I need to modify its width/height. Is there a simple ...

javascriptiframe

What is the method of showing a leaflet map in a particular div tag?

I want to showcase a leaflet map, but I specifically need it to be displayed in a div tag with a particular id like document.getElementById("map"). Here is the code snippet below which utilizes Vue.js: Here is the div tag where the map will be rendered: ...

javascriptgoogle-mapsdictionaryvue.jsleaflet

Removing a dynamic component in Angular

Utilizing Angular dynamic components, I have successfully implemented a system to display toaster notifications through the creation of dynamic components. To achieve this, I have utilized the following: - ComponentFactoryResolve - EmbeddedViewRef - Ap ...

javascriptangulartypescriptmodule

Role="presentation" containing a <form> element within

<nav> <ul class="nav nav-pills pull-right"> <li role="presentation"> <form action="/logout" method="POST" id="logout-form"> <a href="#" onClick="document.getElementById('logout-form&ap ...

javascripthtmlbootstrap-4

How can I retrieve the background color of the WordPress admin page?

Is there a way in PHP to extract the current active colors of specific elements like #wpadminbar or #adminmenu .wp-submenu from the admin page for my plugin? I am not interested in getting the schema names (base, focus, current)! Here is an example code s ...

phpcsswordpresscolorsadmin

Mastering the art of resolving a dynamic collection of promises with '$.all'

Imagine having 3 promises and passing them to $q.all. This results in a new promise that resolves when the 3 promises are resolved. But what if I realize before the 3 promises resolve that I also want a 4th promise to be resolved? Can this be achieved? I ...

javascriptangularjspromise

Creating a custom math formula using a combination of Javascript and PHP

Is it possible to apply a math formula from another variable or database? var x = 7; var formula = '+'; var y = 10; By this, I mean that the variables should output = 17 (7 + 10); How can we implement this formula using Javascript or PHP? ...

javascriptphpmathformula

Bringing in States and Functions to a React Component

Is there a way to improve the organization of states and functions within a functional React Component? Here's my current code structure: import React from 'react' //more imports... const Dashboard = () => { const [] = useState() / ...

javascriptreactjsimportreact-hooksstate

Why does the browser keep converting my single quotation marks to double, causing issues with my JSON in the data attribute?

This task should be straightforward, but I seem to be facing a roadblock. I am trying to insert some JSON data into an input's data attribute, but the quotes in the first key are causing issues by prematurely closing the attribute. Here is the code ...

javascriptjqueryhtmljson

Refining keys within an array of objects

If I have an array of objects retrieved from a Node Repository like this: data = [ { title: "JavaScript Basics", author: "John Smith", year: 2020 }, { title: "Node.js Essentials", ...

javascriptnode.jsmongodb

Rules of HTML tables extend to the border size

Check out this HTML code snippet: div { border: 2px solid red; height: 50vh; width: 50vw; } table { border: 1px solid; table-layout: fixed; } <div> <table rules="cols"> <tr> <th>Name</th> < ...

htmlcsshtml-table

A Step-by-Step Guide to Launching PDF Blob from AJAX Response in a Fresh Chrome Tab

I'm sending a POST request to a server, and in response, I receive a PDF file that is returned as a blob. To handle this blob, I am using the "handle-as='blob'" attribute of iron-ajax (a Polymer element), just to cover all bases. Now, my g ...

javascriptajaxgoogle-chromepdfpolymer

Continuously converting methods recursively until the array is fully processed

My current code has a method that is not very efficient and does not scale well. The object y is an array consisting of key/value pairs, each containing two properties: 1. A unique string property called name. This value is identified by the childre ...

javascripttypescript