浮动文本框设计问题

Question

离子 4 - 角度 7

ion-item-bg - CSS

.ion-item-bg{
--background: transparent;
--color:#fff;
border-bottom: 1px solid #fff

}

<ion-item class="ion-item-bg" lines='none'>
                    <ion-label class="open-sans-light" position="floating" style="--color:#fff;">
                        email
                    </ion-label>
                    <ion-input formControlName='email' autocomplete='off'></ion-input>
                </ion-item>

如果我们保存凭据，那么在重新加载 UI 时看起来就像图像

尝试关闭自动完成功能，但仍然遇到问题。

Answer 1

你只说错了，而不是你真正想要的。

我假设您也希望文本框也是透明的？

看来您需要设置ion-input 的样式。

ion-input {
  --background: transparent;
}

如果有时这不起作用，我不得不使用：

ion-input {
  --background: transparent;
  background: transparent;
}

或者甚至把!important;'s放在他们身上。