【问题标题】:Floating textbox design issue浮动文本框设计问题
【发布时间】:2019-08-16 22:38:45
【问题描述】:

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

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

【问题讨论】:

    标签: ionic-framework ionic4


    【解决方案1】:

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

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

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

    ion-input {
      --background: transparent;
    }
    

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

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

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

    【讨论】:

    • 我需要删除“灰色”背景。仅当存储凭据时,我才会遇到此问题。在隐身窗口中我没有遇到这个问题(所有浏览器)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-07-20
    • 1970-01-01
    • 2017-06-18
    • 1970-01-01
    • 2011-09-28
    • 1970-01-01
    • 2014-06-21
    相关资源
    最近更新 更多