如何在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處理填充的方式。