文本区域背景与其在 IE 上的占位符背景图像冲突

Question

我试图在图像中放置一个占位符，但在 IE 中查看时发生了一些烦人的事情。 Chrome、Firefox、Edge 甚至 Opera 都可以正确显示带有占位符图像的文本区域背景，而 IE 则完全不行。

这就是发生的事情，文本区域的背景被忽略，而占位符背景图像首先呈现。我希望文本区域的背景颜色和占位符背景都能正确显示，因为在其他浏览器上也是如此。

请仔细查看我在这个 jsbin 上的代码：

https://jsbin.com/zajobog/9/edit?html,css,output

.textarea {
  height: 250px;
  margin-bottom: 15px;
}
.textarea textarea {
  resize: none;
  height: 100%;
  min-height: 200px;
  float: none;
  width: 100%;
  text-align: left;
  padding: 20px 10px;
  font-size: 13px;
  border: 0;
  line-height: 1.5em;
  color: #787878;
  z-index: 1;
  border: 1px solid;
  background: #f2f2f2;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  -ms-appearance: none;
}
.textarea textarea::-webkit-input-placeholder {
  color: rgba(235, 100, 77, 0.43);
}
.textarea textarea:-moz-placeholder {
  color: rgba(235, 100, 77, 0.43);
}
.textarea textarea::-moz-placeholder {
  color: rgba(235, 100, 77, 0.43);
}
.textarea textarea:-ms-input-placeholder {
  color: rgba(235, 100, 77, 0.43);
}
.textarea textarea::placeholder {
  background: url(https://static.stickerjapan.com/v2/images/sticky/icon-comment.svg) no-repeat left 15px;
  background-size: contain;
}
.textarea textarea::-moz-placeholder {
  background: url(https://static.stickerjapan.com/v2/images/sticky/icon-comment.svg) no-repeat;
  background-position: 15px 20px;
}
.textarea textarea::-webkit-input-placeholder {
  background: url(https://static.stickerjapan.com/v2/images/sticky/icon-comment.svg) no-repeat left top;
  background-size: contain;
  height: 20px;
  line-height: 1.7em;
}
.textarea textarea:-ms-input-placeholder {
  background: url(https://static.stickerjapan.com/v2/images/sticky/icon-comment.svg) no-repeat left top;
  background-position: 15px 20px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="textarea">
  <textarea placeholder="      This is a sample placeholder"></textarea>
</div>
</body>
</html>

我知道可能有很多使用 js 的解决方法，但我需要一个很好的解释这是怎么回事。

Answer 1

您可以使用 !important 标志覆盖背景颜色并在 IE 11 中定义边框颜色：

.textarea textarea {
     ...
     border: 1px solid #787878;
     background-color: #f2f2f2 !important;
     ...
}

您可以查看下面的完整示例，它适用于 IE 11：

.textarea {
  height: 250px;
  margin-bottom: 15px;
}

.textarea textarea {
  resize: none;
  height: 100%;
  min-height: 200px;
  float: none;
  width: 100%;
  text-align: left;
  padding: 20px 10px;
  font-size: 13px;
  border: 0;
  line-height: 1.5em;
  z-index: 1;
  border: 1px solid #787878;
  background-color: #f2f2f2 !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  -ms-appearance: none;
}

.textarea textarea::-webkit-input-placeholder {
  color: rgba(235, 100, 77, 0.43);
}

.textarea textarea:-moz-placeholder {
  color: rgba(235, 100, 77, 0.43);
}

.textarea textarea::-moz-placeholder {
  color: rgba(235, 100, 77, 0.43);
}

.textarea textarea:-ms-input-placeholder {
  color: rgba(235, 100, 77, 0.43);
}

.textarea textarea::placeholder {
  background: url(https://static.stickerjapan.com/v2/images/sticky/icon-comment.svg) no-repeat left 15px;
  background-size: contain;
}

.textarea textarea::-moz-placeholder {
  background: url(https://static.stickerjapan.com/v2/images/sticky/icon-comment.svg) no-repeat;
  background-position: 15px 20px;
}

.textarea textarea::-webkit-input-placeholder {
  background: url(https://static.stickerjapan.com/v2/images/sticky/icon-comment.svg) no-repeat left top;
  background-size: contain;
  height: 20px;
  line-height: 1.7em;
}

.textarea textarea:-ms-input-placeholder {
  background: url(https://static.stickerjapan.com/v2/images/sticky/icon-comment.svg) no-repeat left top;
  background-position: 15px 20px;
}

<div class="textarea">
  <textarea placeholder="      This is a sample placeholder."></textarea>
</div>

文本区域背景与其在 IE 上的占位符背景图像冲突

Textarea background conflicts with its placeholder background-image on IE

html

css

internet-explorer