Не удается сделать элементы управления формы прозрачными

Есть ли способ сделать элементы управления формами прозрачными? На самом деле, ни один из моих входов или кнопок не соответствует моему стилю css. Я хочу сделать ионный ввод прозрачным и изменить цвет на ионной кнопке, но он не соответствует моему .css

Я бы хотел, чтобы фоновое изображение также заполняло поля ввода, а текстовые кнопки гиперссылок были белыми.

ion-content {
      --background: #fff url("../../../assets/img/login-image.jpg") no-repeat center center / cover;
     }
form {
  margin-bottom: 32px;
  ion-button {
    margin-top: 20px !important;
  }
}

p {
  font-size: 0.8em;
  color: #d2d2d2;
}

ion-label {
  margin-left: 5px;
}

ion-input {
  padding: 5px;
  background-color: transparent !important;
}

ion-content {
  ion-button{
  .linkbuttons {
    color: white !important;
   }
  }
}
<ion-content class="background">
<form [formGroup]="loginForm">
  <ion-item>
    <ion-label position="stacked">Email</ion-label>
    <ion-input
      formControlName="email"
      type="email"
      placeholder="Your email address"
      [class.invalid]="!loginForm.controls['email'].valid &&
      loginForm.controls['email'].touched"
    >
    </ion-input>
  </ion-item>
  <ion-item
    class="error-message"
    *ngIf="!loginForm.controls['email'].valid &&
       loginForm.controls['email'].touched"
  >
    <ion-label>Please enter a valid email address.</ion-label>
  </ion-item>

  <ion-item>
    <ion-label position="stacked">Password</ion-label>
    <ion-input
      formControlName="password"
      type="password"
      placeholder="Your password"
      [class.invalid]="!loginForm.controls['password'].valid&& loginForm.controls['password'].touched"
    >
    </ion-input>
  </ion-item>
  <ion-item
    class="error-message"
    *ngIf="!loginForm.controls['password'].valid
      && loginForm.controls['password'].touched">
    <ion-label>Your password needs more than 6 characters.</ion-label>
  </ion-item>

  <ion-button (click)="loginUser(loginForm)" expand="block" [disabled]="!loginForm.valid">
    Log In
  </ion-button>
</form>

  <ion-button expand="block" fill="clear" class="linkbuttons" routerLink="/signup">
    Create a new account
  </ion-button>

  <ion-button expand="block" fill="clear" class="linkbuttons" routerLink="/reset-password">
    I forgot my password
  </ion-button>
</ion-content>

person D.Hodges    schedule 06.03.2019    source источник


Ответы (3)


Вместо background-color: transparent попробуйте opacity: 0.5 ^^

person NeonNatureEX    schedule 06.03.2019

Вы можете изменить фон ion-input с помощью пользовательской переменной --background.

ion-input{
  --background: transparent;
}

https://ionicframework.com/docs/api/input#css-custom-properties

ion-button работает так же:

ion-button{   
  --background: ...; 
}

https://ionicframework.com/docs/api/button

person Tomas Vancoillie    schedule 06.03.2019

Ионный 5

Я сделал это с помощью color="transparent" на ion-item

  <ion-item color="transparent">
       

   </ion-item>
person Sampath    schedule 17.07.2020