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

Question

目标：：在当前的演示中，textarea字段中的最后一个单词和底部边框之间存在填充（底部边框通过“ background”属性实现）。

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

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

在Webinspector中：

问题：：一旦我专注于文本区域，请按Enter键并在其中键入一些字符，则其底部边框附近的字符太低了（因为填充底部被忽略了），看起来像这样（错了）：

在Webinspector中：

我试图设置calc（100％+ 7px）背景位置，以保持底部边框和字符之间的空格/填充，但没有成功。

在键入时如何保持文本和底部边框之间的填充/空格？ （无需忽略/丢失/删除“ 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

我现在已自行修复。 我已经为父元素创建了一个父类，将背景属性更改为该父元素，并在child（textarea）元素上将其删除。

现在填充可以按预期工作了。

注意：在阅读了类似的问题之后，似乎是一个事实，即填充在webkit中对textareas的“预期效果”不起作用。这似乎不是一个错误，只是当滚动条开始出现在文本区域上时Webkit处理填充的方式。