如何使 <textarea> 不透明答案

【问题标题】：How to make <textarea> un-transparent如何使 <textarea> 不透明
【发布时间】：2018-07-11 04:45:49
【问题描述】：

label {
  font-weight: normal;
  padding-right: 10px;
  float: left;
  width: 186px;
  margin-bottom: 0;
  position: relative;
}

textarea {
  position: absolute;
  top: 17px;
  overflow: hidden;
}

<label>
<aside>order id</aside>
<textarea placeholder="please enter order id, one by line" onfocus="javascript:this.style.height='100px';"
    onblur="javascript:this.style.height='30px';" class="form-control"></textarea>
...
<aside>buyer name</aside>
<input type="text" placeholder="">
</label>

默认状态：

当 textarea 聚焦时，它的高度会向下滚动，否则滚动到默认状态。

焦点状态：

问题是textarea背景是透明的！

我尝试将背景设置为灰色，但仍然透明且背景为灰色：

那么，如何让textarea不透明呢？

【问题讨论】：

你用的是什么浏览器？对我来说，这不是透明的。我使用的是 Chrome 版本 67.0.3396.99（官方版本）（64 位）
@JordanQuartermain Ubuntu16.04 Chrome 版本 67.0.3396.99（官方版本）（64 位）

标签： html css textarea

【解决方案1】：

您是否尝试将不透明度设置为 1？

【讨论】：

【解决方案2】：

已经解决了，添加一个css z-index

textarea {
    position: absolute;
    top: 17px;
    overflow: hidden;
    z-index: 10;
}

【讨论】：