问题标签 [floating-labels]

我的输入有问题，一旦我的输入中有文本，我就有一个自定义浮动标签。我的问题是 chrome 自动填充在我的 javascript onDocumentReady 检查文本之后添加文本。我希望在 chrome 加载文本或自动完成的任何时间之后调用我的 javascript 函数。可能吗？

我尝试在 documentGetReady 上启动 javascript 函数。

我正在做一个研究项目，我正试图向我的老板展示一些可以放入项目中的干净图表。我制作了这个筛子图，但我不知道 1.如何旋转 x 轴标签并将它们拉出图表和 2.如何向上移动与图表顶部重叠的 y 轴标签出色地。

我试图旋转标签，但它仍然与图表重叠。

谢谢您的帮助！

不久前，我发现了这个浮动标签，从那以后我一直在寻找类似的工作标签。

我尝试了一对看起来不错并且一开始似乎工作得很好，但结果他们有自己的问题，比如他们要么需要具有所需的属性，否则他们的标签看起来就像一个普通的标签，或者标签会返回当输入的类型是电子邮件时。

所以我想知道是否有人有一个我可以使用的好的替代品。

我试图弄清楚如何让这段代码在 IE 和 Edge 中工作。它在 Chrome 和 Firefox 中完美运行，而且看起来也不错。我知道它可能会处理浏览器对 :placeholder-shown 的支持，但我不确定也无法弄清楚。显然，如果您在 Edge 中运行它，标签不会向上浮动，并且当您键入时，它只会出现在标签顶部。如果有人可以提供帮助，这是我正在使用的代码：

这是原始来源：https ://jsfiddle.net/7z8q4pyd/

CSS

HTML

我正在floating-label-react为我的表格使用图书馆。除了一种情况外，它工作正常。如果任何用户名和密码以前保存在 chrome 中，它看起来像这样。但在 Mozilla 中运行良好。

这是我创建此表单的代码。我也在使用react-bootstrap.

任何解决方法都会非常有帮助。

我想在一些输入字段中使用浮动标签。for 基于 Bootstrap 4 样式，但我无法更改元素的结构。

我发现这个浮动标签的例子：https ://www.cssscript.com/demo/bootstrap-4-form-floating-labels/

问题是，HTML 结构不同，在示例中字段位于input字段之前label。这与我的代码相反，我无法更改那部分。

我发现，示例中的 CSS 仅在结构相同时才有效。这是不适用于我的结构的 CSS 代码：

它需要输入后的标签。

我的 HTML 结构如下所示：

如您所见，标签位于输入之前。

我不知道如何改变它。

如果我将 CSS 更改为：

它将样式化输入而不是标签元素。

还有其他方法吗？

我目前正在使用Material UI Components 处理电话号码字段。

字段结构如下

自动完成字段（用于国家代码）有一个浮动标签，上面写着“手机号码”。

When the country code is selected, it is highlighted, however, when the mobile number is to be entered in TextField , it is not highlighted anymore.

只要选择框中的任何组件，浮动标签是否可以保持突出显示？

查看文本区域浮动标签的文档https://getbootstrap.com/docs/5.0/forms/floating-labels/，如果内容可滚动，标签似乎与输入重叠：

有没有办法防止这种情况并在标签下方设置可滚动区域？