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; } } }
3 Réponses :
Au lieu de background-color: transparent
, essayez plutôt opacity: 0.5
^^
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; }
Ionic 5
Je l'ai fait en utilisant color = "transparent"
sur ion-item
<ion-item color="transparent"> </ion-item>