填充顶部不工作滚动textarea

Question

我正在尝试在textarea上维护顶部填充。但是当滚动条出现时，填充顶部不起作用。

这是我的html和css。有人可以帮帮我吗？谢谢。

<div class="form-group has-feedback issue-detail-text-area marginTop30">
       <textarea id="abc" name="abc" class="form-control clearable textArea x form-control-focus" rows="3" maxlength="500"></textarea>
       <span class="input-lable input-lable-focus">Other issue details (optional)</span>
</div>

#abc {
   padding-top: 22px;
   padding-bottom: 8px;
}
.marginTop30 {
   margin-top: 30px;
}
.input-lable-focus {
   top: 10px;
   font-size: 11px;
   opacity: 1;
   z-index: 100;
}
.input-lable {
   position: absolute;
   color: #b8bdc4;
   left: 18px;
}

Answer 1

这解决了您的问题。唯一需要注意的是，您必须设置宽度，而textarea只能垂直扩展。

基本上，你将把class'external'添加到form-group div并假装为整个textarea。 <textarea>本身不会将自己限制在边界填充/边距。

.input-lable-focus {
  font-size: 11px;
  opacity: 1;
  z-index: 100;
}
.input-lable {
  color: #b8bdc4;
}
textarea {
  border: none;
  outline: none;
  width: 495px;
  max-width: 495px;
}
.outer {
  overflow: auto;
  padding: 10px 0 0 10px;
  width: 500px;
  border: 1px solid #aaa;
}

<div class="form-group has-feedback issue-detail-text-area outer">
  <span class="input-lable input-lable-focus">Other issue details (optional)</span>
  <textarea id="abc" name="abc" class="form-control clearable textArea x form-control-focus" rows="3" maxlength="500"></textarea>
</div>

Answer 2

您的代码似乎正在运行......我从外部div中删除了marginTop30类...

请参阅代码段

#abc {
   padding-top: 20px;
   padding-bottom: 8px;
}
.input-lable-focus {
   top: 15px;
   font-size: 11px;
   opacity: 1;
   z-index: 100;
}
.input-lable {
   position: absolute;
   color: #b8bdc4;
   left: 18px;
}
/* These styles aren't necessary, but just for show. */
textarea {
  border: 1px solid grey;
  border-radius: 5px 5px 0 5px;
  width: 500px;
}

<div class="form-group has-feedback issue-detail-text-area">
  <span class="input-lable input-lable-focus">Other issue details (optional)</span>
  <textarea id="abc" name="abc" class="form-control clearable textArea x form-control-focus" rows="3" maxlength="500"></textarea>
</div>