I am trying to change the background of the ion-radio-group
below to match the other rows:
I have shown my HTML & CSS below.
I tried adding the rowStyle
class to the row. That changes the background of the row, but the radio button’s are still appearing blue.
If I update the --ion-background-color
value in my CSS for ion-content
, the radio button background does change, but so does the entire page.
I just want all the rows to match.
Can someone please tell me how to do this?
<ion-content>
<ion-grid style="width: 75%">
<ion-radio-group [(ngModel)]="userType">
<ion-row class="rowStyle">
<ion-item>
<ion-label>Customer</ion-label>
<ion-radio value="customer"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Supplier</ion-label>
<ion-radio value="supplier"></ion-radio>
</ion-item>
</ion-row>
</ion-radio-group>
<ion-row class="rowStyle">
<ion-icon name="person" color="secondary"></ion-icon>
<ion-input type="text" placeholder="Your Name" [(ngModel)]="name"></ion-input>
</ion-row>
<ion-row class="rowStyle">
<ion-icon name="mail" color="secondary"></ion-icon>
<ion-input type="email" placeholder="Your Email" [(ngModel)]="email"></ion-input>
</ion-row>
<ion-row class="rowStyle">
<ion-icon name="key" color="secondary"></ion-icon>
<ion-input type="password" placeholder="Your Password" [(ngModel)]="password"></ion-input>
</ion-row>
<ion-button expand="block" shape="round" fill="outline" color="light" style="margin-top: 20px;" (click)="signUp()">Sign Up</ion-button>
</ion-grid>
</ion-content>
CSS:
ion-content {
--ion-background-color:#3dc2ff;
}
.logo {
font-size: 25vh;
margin-top: 40px;
margin-bottom: 20px;
}
h1, h6 {
color: white;
font-size: 1em;
background-color: danger
}
.rowStyle {
background-color: white;
padding-left: 10px;
border-radius: 30px;
margin-bottom: 10px;
ion-icon {
margin-top: 13px;
margin-right: 10px;
}
}
I added the rowStyle
class to the row. The background of the tag is appearing white, but the background of the 2 radio buttons isn’t changing.