首页 > 解决方案 > 浮动文本框设计问题

问题描述

离子 4 - 角度 7

离子项目-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 时看起来像图像

尝试了 autocomplete off 和 all ,但仍然面临问题。

标签: ionic-frameworkionic4

解决方案


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

我假设您希望文本框也透明?

看起来你需要对ion-input.

ion-input {
  --background: transparent;
}

如果这不起作用,有时我不得不使用:

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

或者甚至穿上!important;它们。


推荐阅读