添加填充会使文本区域输入在某些操作系统上不可见

Question

我有这个 textarea 可以在聚焦时获得一些样式。

<textarea id="msg" rows="4" name="msg" placeholder="Your message.."></textarea>

其中一种样式是 padding

#msg:focus {
    padding-bottom: 150px;
}

虽然这在带有 Firefox、Edge、Chrome 和 Opera 的 Windows 10、Mac 和 Android 上就像一个魅力，但在所有基于 debian 的机器上的 Firefox 中存在一个问题我测试并 显然也在 pre-Windows-10 上（参见 cmets）。所有文本在应用填充的第二秒内消失，但它只是不可见的，因为如果您继续输入，文本将被输入并且可以被复制或剪切。如果您禁用填充，它也会立即出现。

如果您想自己查看整个表单：https://neurotactics.de/contact

Answer 1

我认为这与应用于 textareabox-sizing、height 和 padding 的组合有关/strong>.

box-sizing: border-box - 宽度和高度属性（以及最小/最大属性）包括内容、内边距和边框

因此，如果您的 textarea 具有 height: 64px 和 padding-bottom: 150px 焦点，则没有空间留给内容，因此它可能会在 firefox 上导致这种行为。

我建议使用属性 min-height 属性而不是 padding 的不同方法。
例如，您的 textarea 可以将 min-height 默认设置为 0，因此正在应用 height 属性：

#msg {
    height: 64px;
    min-height: 0;
}

在焦点上，增加 min-height 以覆盖 height 属性：

#msg:focus {
    min-height: 150px;
}