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>