1
votes

Impossible de rendre les contrôles de formulaire transparents

Existe-t-il un moyen de rendre les contrôles de formulaire transparents? En fait, aucune de mes entrées ou boutons n'adhère à mon style css. Je veux rendre l'entrée d'ions transparente et changer la couleur sur le bouton d'ion mais cela ne colle pas à mon .css

Je voudrais que l'image d'arrière-plan remplisse également les champs de saisie et crée les boutons de texte du lien hypertexte blanc.

<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>
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;
   }
  }
}


0 commentaires

3 Réponses :


0
votes

Au lieu de background-color: transparent , essayez plutôt opacity: 0.5 ^^


0 commentaires

0
votes

Vous pouvez changer l'arrière-plan de la ion-input avec la variable personnalisée --background.

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

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

ion-button fonctionne de la même manière:

ion-input{
  --background: transparent;
}

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


0 commentaires

0
votes

Ionic 5

Je l'ai fait en utilisant color = "transparent" sur ion-item

  <ion-item color="transparent">
       

   </ion-item>


0 commentaires