无法使表单控件透明答案

【问题标题】：Can't make form controls transparent无法使表单控件透明
【发布时间】：2019-07-27 15:12:01
【问题描述】：

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

【问题讨论】：

标签： css angular ionic-framework ionic4 form-control

【解决方案1】：

离子 5

我已经在ion-item 上使用color="transparent" 完成了它

  <ion-item color="transparent">
       

   </ion-item>

【讨论】：

【解决方案2】：

代替background-color: transparent，试试opacity: 0.5 ^^

【讨论】：

【解决方案3】：

您可以使用自定义变量--background 更改ion-input 的背景。

ion-input{
  --background: transparent;
}

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

ion-button 的工作方式相同：

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

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

【讨论】：