时间戳

首页 > 解决方案 > Ionic 5 - ion-button type="submit" css bug

css - Ionic 5 - ion-button type="submit" css bug

问题描述

当我将类型添加到按钮时，其下方会出现一个矩形阴影。

<form [formGroup]="loginForm" (ngSubmit)="setLoginData()">
    <ion-button class="facebook" shape="round" (click)="facebookLogin()">
        <label class="label">Entrar com o Facebook</label>
    </ion-button>
    <div class="separator"> <label style="color: #5C6B7C">ou</label> </div>
    <ion-item>
        <ion-label position="floating">E-mail</ion-label>
        <ion-input name="email" type="email" formControlName="email"></ion-input>
    </ion-item>
    <br>
    <ion-item>
        <ion-label position="floating">Senha</ion-label>
        <ion-input name="password" type="password" formControlName="password"></ion-input>
    </ion-item>
    <ion-button class="signIn" type="submit" shape="round"> 
        <label class="label">Fazer Login</label>
    </ion-button>
</form>

按钮 css 中有错误的图像

没有类型提交工作正常

<form [formGroup]="loginForm" (ngSubmit)="setLoginData()">
    <ion-button class="facebook" shape="round" (click)="facebookLogin()">
        <label class="label">Entrar com o Facebook</label>
    </ion-button>
    <div class="separator"> <label style="color: #5C6B7C">ou</label> </div>
    <ion-item>
        <ion-label position="floating">E-mail</ion-label>
        <ion-input name="email" type="email" formControlName="email"></ion-input>
    </ion-item>
    <br>
    <ion-item>
        <ion-label position="floating">Senha</ion-label>
        <ion-input name="password" type="password" formControlName="password"></ion-input>
    </ion-item>
    <ion-button class="signIn" shape="round"> 
        <label class="label">Fazer Login</label>
    </ion-button>
</form>

按钮css中没有错误的图像

标签： css

解决方案

在我的全局样式表中添加了这个和上一个答案的 css，以便它适用于应用程序中的每个提交类型按钮：

ion-button[type=submit] {
  appearance:         none;
  -moz-appearance:    none;
  -webkit-appearance: none;
}

推荐阅读