如何在 Textarea 元素中设置填充（背景图像错误）

Question

目标： 在当前的demo中，textarea字段的最后一个单词和底部边框之间有一个padding（底部边框是通过一个"background"实现的）属性).

演示： https://jsfiddle.net/7vaf1th8/336/

这就是它的样子（它是正确的，这正是我想要的！）：

在 Webinspector 中：

问题：当我将焦点放在文本区域时，按回车键并输入一些字符，字符在底部边框附近太低（因为填充底部被忽略），它看起来像这样（这是错误的）：

在 Webinspector 中：

我试图设置一个 calc(100%+7px) 背景位置，以保持底部边框和字符之间的 space / 填充，但没有尝试成功。

如何在输入时保持文本和底部边框之间的填充/space？（没有 disregarding/loosing/deleting "background" 属性（底部边框），因为我需要它？）

Answer 1

在 .form-group .form-control 中，您可以将填充更改为 0px，它会删除多余的内容：https://jsfiddle.net/7vaf1th8/349/

.form-group .form-control {
  margin-bottom: 7px;
  border: 0;
  background-image: linear-gradient(#66bb6a, #66bb6a), linear-gradient(rgba(165, 181, 203, .5), rgba(165, 181, 203, .5));
  background-size: 0 2px, 100% 1px;
  background-repeat: no-repeat;
  background-position: center bottom, center calc(100%);
  background-color: transparent;
  transition: background 0s ease-out;
  float: none;
  box-shadow: none;
  border-radius: 0;
  resize: none;
  margin-top: 7px;
  padding-top: 0 !important;
  height: auto;
  padding: 0px 0;
  width: 100%;
  color: #555;
  display: block;
}

Answer 2

我现在已经自己修好了。我为父元素创建了一个父元素 class，将背景属性更改为此父元素并在子元素（textarea）上将其删除。

现在填充按预期工作。

注意：这似乎是事实，在阅读了类似的问题后，padding 在 webkit 的文本区域中不起作用 "as expected"。这似乎不是一个错误，只是当滚动条开始出现在文本区域时 webkit 处理填充的方式。

如何在 Textarea 元素中设置填充（背景图像错误）

How to set padding in Textarea element (background-image bug)

html

css

textarea

background-image