如何在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的作用不符合预期。 这似乎不是一个bug，只是滚动条开始出现在textarea上时webkit处理填充的方式。