Ionic's ion-radio CSS: A highlighted selection

I've encountered an issue with my CSS in Ionic...

My goal is to modify the CSS when a radiobutton is clicked, as illustrated below.

  [type=radio]:checked + ion-icon {
      background-color: $primaryColor;
      color: white;
      font-size: 45px;
  }

The provided CSS code works for regular HTML tags, but in Ionic we use a tag called ion-radio. Is there a method to achieve the same effect using the radio button from Ionic?

  ion-radio:checked + ion-icon {
      background-color: $primaryColor;
      color: white;
      font-size: 45px;
  }
htmlcssionic-frameworkionic3

Answer №1

After reviewing the documentation, it seems that when an ion-radio element is selected, it acquires the class radio-checked.

Have you checked to see if your elements also receive this class when they are selected?

Answer №2

I managed to solve the issue by incorporating a new class when a specific radio button is selected.

Here's the snippet of HTML code:

<ion-icon [ngClass]="{'active': (gender == 'Female')}" name="female"></ion-icon>

And here's the corresponding CSS style:

 /* STYLES FOR CHECKED STATE */
  ion-icon.active {
      background-color: $primaryColor;
      color: white;
      font-size: 45px;
  }

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

What is the best way to position content at the bottom of a div?

I've been attempting to align my menu div with the bottom of my logo div on the same line within my header section. <div id="header"> <div id="top-bar"> </div> <div id="clear"></div> ...

htmlcsscss-position

When the canvasJS range column chart is below the horizontal axis, modify the color and width of the bars

For each day of the week, there are records of fuel consumed and refilled. I envisioned representing this data in a range column chart using CanvasJS library. The unique aspect is that the color and width of the bars should change dynamically based on thei ...

javascripthtmlchartsbar-chartcanvasjs

Clicking the delete button in Firebase to remove an item

I am in the process of developing a simple CRUD application and have opted for Firebase as my backend solution. While I have successfully implemented the create and read functionalities, I've hit a roadblock with the delete operation. When attempti ...

javascripthtmlfirebasegoogle-cloud-firestore

Achieving equal heights for div boxes while aligning list items inside

I have 8 green boxes on my site, each containing an image and either 3 or 4 list items with text only. The issue I'm facing is that the boxes are not of equal height due to two reasons: (1) One box may have an extra list item pushing the rest down, or ...

htmlcsslistdivider

Do you want your image to appear visually pleasing on all screen sizes?

Currently, I am working on a mobile website and encountering an issue with the image banner. For tablets, it should look like this: However, when viewed on mobile, it needs to appear as follows: This is the code I have implemented so far: <div class ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Error: Unable to access the 'resource' property as it is undefined

I am currently working on a project that involves fetching the latest 4 results from Craigslist using a query. Although I have successfully retrieved all the relevant information, I seem to be encountering an issue with loading the URL of the image from th ...

javascriptjqueryhtmljson

The margin property is set to zero but the div element still maintains some spacing

How can I create a div with no margin for a header that spans across the page? Here is what I have tried: <!DOCTYPE html> <html> <head> <title></title> <style> .test { height: 100 ...

htmlcsslayoutmargin

What is the best way to align every element in a single corner using Flexbox CSS?

My goal is to place a link in each corner (left, top, right, bottom) using Flexbox. I attempted using top: 0 or adjusting the flex-direction to column. .container { position: relative; } .top { display: flex; justify-content: space-b ...

htmlcssflexbox

Tips for resolving conflicts between CSS files

My index.html file contains multiple css and js files, including MaterializeCSS and a style.css file. However, when both are included simultaneously, using elements from Materialize such as tabs results in them not appearing correctly. Despite initializing ...

htmlcssmaterialize

Is there a way to create and install an .ipa file on an iPhone from Xcode?

After successfully installing MacOS 10.12 using VMware and implementing an Ionic 2 app for iOS, I managed to generate an .ipa file using the following steps: Start by cleaning your project. Build your project. Navigate to the products menu -> select b ...

iosiphonexcodeionic-frameworkmulti-device-hybrid-apps

From plain to vibrant: Using CSS gradients for background design

I have customized a button by adding a gradient to it. Below is the code snippet: .mybutton { background: #258dc8; /* Old browsers */ background: -moz-linear-gradient(top, #258dc8 0%, #258dc8 100%); /* FF3.6+ */ background: -webkit-gradient( ...

css

Although the CSS3 Mobile Multilevel Menu is functioning, it is currently unable to display the second level of the

Hi there! I am currently working on a CSS3 vertical menu for a mobile webpage. While the first level of the menu is functioning correctly, the same cannot be said for the second level. It seems to always show up on mouseover, despite my numerous attempts t ...

htmlcssmobilemenu

Setting session expiration for an HTML page in MVC with JavaScript - A step-by-step guide

I'm working on a HTML page within an MVC framework that includes a button click function. I'm trying to figure out how to redirect the user to the login page if the page remains idle for 30 minutes. I've attempted using the code snippet belo ...

javascripthtmlasp.net-mvc

JQuery failing to display image within set timeframe

In my website, I have implemented a feature that displays data from a database using auto-scrolling. As the user scrolls down the page, an AJAX function is triggered to fetch the next set of records from the database and append them to the existing content ...

jqueryhtmlajaxsettimeoutautoscroll

Leveraging dynamic anchor tags within a Chrome extension

In my current project, I am dynamically generating anchor tags and using them to redirect to another page based on their unique IDs. While I have successfully implemented this feature using inline scripts in the past, I ran into an issue with Chrome exte ...

javascriptjqueryhtmlgoogle-chrome-extension

Add the CSS code to the <head> section, even though the CSS styles are located within

According to the analysis from Webpagetest.org, it appears that The CSS for http://mypage.com/howitworks is located in the document body: The link node for http://mypage.com/design_header.css should be relocated to the document header. The design_header ...

phphtmlcss

Experiencing problems with ajax submit causing a reload, the unnamed function does not run as expected

After spending a significant amount of time searching for a solution, I realized that my approach might not be correct. I am trying to use .submit and .post after clicking on a submit button. While I have successfully implemented ajax submission in other i ...

phpjqueryhtmlajax

Creating a unique layout with CSS: layered divs

I'm struggling with a stubborn layout issue that I just can't seem to figure out... - Left column - Fixed, Static (always in view) - Right column - Fluid/liquid/scrollable --- Header - fixed --- left/main fluid/liquid --- Right/sidebar - fixed ...

csslayouthtmlsticky-footeroverlapping

Is there a way to make this animation activate when the entire area in front of the link is hovered over or tapped?

I am working on an animation that needs to run behind a link. Here is an example: https://codepen.io/ehbehr/pen/KKNbOvN and below is the HTML and CSS: *, *:before, *:after { margin: 0; padding: 0; } .container { position: relative; width: 100%; ...

javascripthtmljquerycss

Populate a table dynamically in JavaScript using a variable

I have a table with IDs such as r0c1 = row 0 column 1. I attempted to populate it using the following script, but it doesn't seem to be functioning correctly: var data = new Array(); data[0] = new Array("999", "220", "440", "840", "1 300", "1 580", " ...

javascripthtmlhtml-table