How to change background of radio button group in Ionic app?

@Sweg wrote:

I am trying to create a Sign Up form in my ionic app below.

It includes a group of radio buttons with 2 options.

I am having trouble formatting the row that includes the radio group to match the others.

I’ve attached a screenshot of the existing behaviour below.

Can someone please tell me how I can get the background of the radio buttons to match the other rows (white)?

Also, I’m not sure if I’m putting the label for the radio-group in the correct place.

Please find my code below, thanks a lot in advance!

<ion-grid style="width: 75%">

    <ion-label>Account Type:</ion-label>

    <ion-row class="rowStyle">
      <ion-radio-group>
        <ion-row>
          <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>

    <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-grid>

Here is the 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;
    }
  }

Posts: 1

Participants: 1

Read full topic