Adapting actions when radio button is activated (while keeping HTML structure intact)

Hey friends, I'm looking for assistance on applying a style to (span class = "ui-radiobutton-icon") when the radio button is true. Can anyone help me out? Thank you!

Specifics: Must be done within the HTML structure 

<div class="ui-radiobutton ui-widget">
   <div class="ui-helper-hidden-accessible">
       <input type="radio" name="groupname" value="Masculino" ng-reflect-checked="true">
   </div>
   <div ng-reflect-ng-class="[object Object]" class="ui-radiobutton-box ui-widget ui-state-default ui-state-active">
       <span class="ui-radiobutton-icon fa fa-fw fa-circle" ng-reflect-klass="ui-radiobutton-icon" ng-reflect-ng-class="[object Object]"></span>
   </div>
</div>
csssass

Answer №1

Here is an example that follows your format, but it features the radio button being placed within ui-radiobutton.

Do you think this solution will meet your needs?

input {
  display: none;
}
label {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid black;
}
input:checked ~ .ui-helper-hidden-accessible label {
  background: gray;
}
input:checked ~ .ui-radiobutton-box .ui-radiobutton-icon {
  color: red;
}
<div class="ui-radiobutton">
  <input id="ui-radio-hidden" type="radio" name="uir">
  <div class="ui-helper-hidden-accessible">
    <label for="ui-radio-hidden"></label>
  </div>
  <div class="ui-radiobutton-box">
    <span class="ui-radiobutton-icon fa fa-fw fa-circle">Red when checked</span>
  </div>
</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

Mobile view causes malfunction in Bootstrap Toggle Burger Menu functionality

<nav class="navbar navbar-expand-lg navbar-dark px-2 " style="background-color:#E53935;"> <a class="navbar-brand" href="#">FoodFusion</a> <button class=&quo ...

phphtmlcssmenu

Getting Your Content Centered Horizontally with Fixed Positioning in CSS

I would like the div to be centered horizontally with a fixed position, but it doesn't seem to work in my code. Can someone help me troubleshoot? Check out the demo here. HTML: <div id="fancybox-thumbs" class="bottom" style="width: 675px;"> ...

htmlcss

What is the best way to eliminate excess space on the right side in Bootstrap 4 while in mobile view?

I'm struggling to understand why this layout is not responsive on mobile devices, triggering a bottom scroll bar at around 616px. I'm looking for a solution to hide the scroll bar at least until 414px for iPhones and other smartphones. I've ...

javascripthtmlcssbootstrap-4

Positioning Div at the Bottom of a Interactive Flip Card Using Bootstrap 4

My current project features a creative flip image card created using bootstrap and js. On the back of the card, there is a title, a main text body, and a few small additional pieces of information. My goal is to have these three small bits of information a ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Troubleshooting the Problem with CSS Margin in HTML Footer

I'm encountering an issue with the footer on my website. The margin: auto; command doesn't seem to be working for the list items in the footer. I want the items in the footer to occupy one-third of the width, but no matter where I place the marg ...

htmlcssmarginfooterlistitem

Tips for ensuring an element stays anchored at the bottom even when the keyboard is displayed

I recently encountered a situation on one of my pages where an element positioned at the bottom using absolute positioning was causing issues when the keyboard was opened, as it would move to the middle of the page unexpectedly. While this may seem like a ...

javascripthtmlcssreactjs

Activate Jquery to display the submenu when clicked and conceal any other open submenus at the same time

I'm trying to create a responsive menu with menus and submenus using JQuery. However, as a newbie to JQuery, I'm struggling to hide a previous submenu when displaying another one. Here's the CodePen link Below is the HTML code: <nav cl ...

javascriptjqueryhtmlcss

Organizing flex-items in a specific manner

My goal is to organize flex-items in a specific layout: To achieve this, I am referencing the following example: .Container { display: flex; overflow: hidden; height: 100vh; margin-top: -100px; padding-top: 100px; position: relative; widt ...

htmlcssflexbox

Ensuring the correct width for a .png image in an email newsletter for Outlook 2013

After creating an email newsletter that works perfectly on all email clients except Outlook 2013, I realized that the image I included is not adhering to the table width specified. Instead, it is defaulting to its own width of 658px. View image here Below ...

htmlcssemailoutlooknewsletter

Move the menu button to the right of the title slide, beyond the edge of the card

Having an issue with the MuiCardHeader component. <CardHeader disableTypography avatar={renderAvatar()} action={ <IconButton onClick={toggleMenu}> <img src={MoreIcon} alt=""/> </IconButton ...

javascriptcssreactjsmaterial-ui

Left-align elements within a div container that is centered

I want to left-align my elements within a div container that is centered. I used the text-align property to center the overall div, but now I'm having trouble aligning another content container's text to the left within the center-aligned div. H ...

htmlcss

Elements being impacted by the CSS Transition are being pushed

I am facing a CSS issue that I just can't seem to resolve. If you visit and check out the top search bar. On hovering over it, you'll notice it resizes to fit the content width. This is the CSS code responsible for this: .header .search-wrap ...

htmlcsscss-transitions

I am facing an issue where the text on my website is failing to display properly

I am facing an issue where the text on my website renders normally on Android or Windows, but when I run it on iOS, the text disappears completely. It's as if all the text has been set to display: none; The other elements seem to be tucking in just fi ...

htmlcssiostext

using javascript to target a specific css selector attribute

I have a CSS file with the following code: .datagrid table tbody td { color: #00496B; border-left: 1px solid #E1EEF4; font-size: 16px ;font-weight: normal; } Is there a way to use JavaScript to dynamically change the font size? The code below worked ...

javascriptcss

Moving the element from the right side

Is there a way to change the direction of this element's transition from left to right, so that it transitions from right to left smoothly without any gaps between the element and the edge of the page? @keyframes slideInFromRight { 0% { trans ...

css

What is the process for aligning text with the margin on the left side

Inside a span block, there is an icon: <span><i></i>Text</span> The CSS for the icon is as follows: i { display: inline-block; width: 20px; height: 20px; } When the text inside the span is long, it wraps to the next lin ...

htmlcss

How to create a slideToggle effect for nested ul and li elements

Initially, everything was working fine until I put it through the W3C validator. After fixing the errors, now it's not functioning as expected. I have created a jsfiddle The setup involves nested ul elements being used as dropdowns, with headers tha ...

jquerycssnestedhtml-lists

Connect PHP code to an HTML document

Recently, I created an entry form login page saved as a .php file which displays content in html and css. The page showcases various elements followed by a login form with two fields: Username, Password, and a 'Log in' button. Additionally, I ha ...

phphtmlcssxampp

Organizing HTML elements based on their class names, especially when an element has multiple classes assigned

Hey there, I've been working on an artist page that showcases multiple artists, each with a portfolio image and some detailed information. My goal is to have buttons at the top of the page that, upon clicking, will sort the artists displayed. To achi ...

javascriptjqueryhtmlcssweb-frontend

React - method for transmitting dynamically generated styles to a div element

As a newcomer to the world of React, I keep encountering an unexpected token error related to the ":". Can someone please assist me with understanding the correct syntax for including multiple styles within the Box component provided below? Additionally, h ...

javascripthtmlcssreactjs