Changing color and background color of ion-option

Ionic Framework ionic-v3
11

Ionic v4 and above

Add this in your global.scss

ion-alert {
  //background color
  .alert-wrapper.sc-ion-alert-md {
    background-color: #f8f4aa;
    --background: linear-gradient(
      to right,
      rgba(255, 0, 0, 0),
      rgba(255, 0, 0, 1)
    );
    box-shadow: inset 0 0 75px rgba(255, 210, 0, 0.3),
      inset 0 0 20px rgba(255, 210, 0, 0.4),
      inset 0 0 30px rgba(220, 120, 0, 0.8);
  }

  // Header Text
  .alert-title.sc-ion-alert-md {
    font-size: 25px;
    font-weight: 600;
    font-family: "AustralisProSwash-Italic";
    color: var(--ion-text-color, #00000080);
  }

  // checkbox border color
  [aria-checked="true"].sc-ion-alert-md .alert-radio-icon.sc-ion-alert-md {
    border-color: #00000080;
  }

  // checkbox or radio button color
  .alert-radio-inner.sc-ion-alert-md {
    background-color: #00000080 !important;
  }

  // wrap the text
  .alert-radio-label.sc-ion-alert-md {
    white-space: pre-line !important;
    font-family: "AustralisProSwash-Italic";
    color: var(--ion-text-color, #000000b3);
    font-weight: bold;
  }

  // Height of text
  .alert-tappable.sc-ion-alert-md {
    height: 77px !important;
  }

  // Checked text color
  [aria-checked="true"].sc-ion-alert-md .alert-radio-label.sc-ion-alert-md {
    color: var(--ion-color-step-850, #262626);
  }

  // Button color
  .alert-button-inner.sc-ion-alert-md {
    color: #00000080;
    font-weight: bold;
    font-size: larger;
  }
}
3 Likes