浮动标签在 Firefox 上不起作用答案

【问题标题】：float-label doesn't work on Firefox浮动标签在 Firefox 上不起作用
【发布时间】：2018-09-24 05:06:14
【问题描述】：

我的浮动标签在 Firefox 上不起作用。在 Chrome 上一切正常，就像您在打印件上看到的那样。

我的代码是这样的：

             <div class="col-md-6 col-sm-6 form-group">
                <span class="ui-float-label">
                    <textarea pInputTextarea [(ngModel)]="consulta.dsDiagnostico1" name="dsDiagnostico1" id="diagnostico1" style="resize:none"
                          rows="4" cols="100"
                          class="form-control" maxLength="4000"></textarea>
                    <label for="diagnostico1">Diagnóstico 1</label>
                </span>
            </div>

这是组件： Component Layout

在 Chrome 中输入后： Chrome typing

在 Firefox 中输入后： Firefox typing

任何人都知道一个不错的解决方案，它不会“静态”标签并允许在 Firefox 上正确执行浮动标签功能？

【问题讨论】：

标签： html css angular typescript primeng

【解决方案1】：

在遇到同样的问题后，我找到了解决此问题的方法，在您的 css 文件中执行此操作，标签将在 Firefox 中工作。这是一种解决方法，但目前 PrimeNG 团队没有提供修复

.ui-float-label>input:focus~label, .ui-float-label>input.ui-state-filled~label, .ui-float-label>.ui-inputwrapper-focus~label, .ui-float-label>.ui-inputwrapper-filled~label { top: -.75em; font-size: 12px; }
.ui-float-label>textarea:focus~label, .ui-float-label>textarea.ui-state-filled~label, .ui-float-label>.ui-textareawrapper-focus~label, .ui-float-label>.ui-textareawrapper-filled~label { top: -.75em; font-size: 12px; }

【讨论】：