代码之家 › 专栏 › 技术社区 › leonheess

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

debian-based textarea firefox css html

2

leonheess · 技术社区 · 8 年前

我有一个文本区,当你集中注意力的时候会有一些风格。

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

其中一种是衬垫

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

虽然这在windows 10、mac和android上的firefox、edge、chrome和opera上很有魅力,但也有一个问题 在所有基于debian的机器上的firefox中 我测试了 显然也在Windows 10之前的版本中 (见评论)。所有文本都会在应用填充的第二天消失,但它只是不可见的,因为如果继续键入,文本将被键入,并且可以被复制或剪切。如果禁用填充,它也会立即出现。

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

1 回复 | 直到 8 年前

1

belicam 8 年前

我认为这与财产的组合有关 箱形尺寸 , 高度和衬垫应用于 特克斯塔利亚 .

box-sizing: border-box - 宽度和高度属性(以及最小/最大属性)包括内容、填充和边框

如果你的短信区有 height: 64px 和 padding-bottom: 150px 在focus上,没有足够的空间容纳内容,因此可能会导致firefox上出现这种行为。

我建议使用不同的属性 最小高度 财产而不是衬垫 .
例如,默认情况下,文本区域的“最小高度”可以设置为0,因此将应用“高度”属性:

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

在“聚焦”中,增加“最小高度”以替代“高度”属性:

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