时间戳

首页 > 解决方案 > 无法使表单控件透明

css - 无法使表单控件透明

问题描述

有没有办法使表单控件透明？实际上，我的输入或按​​钮都不符合我的 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>

标签： cssangularionic-frameworkionic4form-control

解决方案

离子 5

我已经使用color="transparent"onion-item

  <ion-item color="transparent">
       

   </ion-item>

推荐阅读