html - 如何在 html/css 中更改多色文本框底部边框的颜色？

Question

我有一个文本框，我可以设置边框颜色。我只想更改文本框的底部颜色。不仅如此，底部应该是多色的。喜欢图片:

我怎样才能做到这一点？请帮忙

Answer 1

您可以使用 CSS 渐变和 CSS 定位来模拟这种效果。例如:-

* {
  margin: 0;
  padding: 0;
}

textarea {
  resize: none;
  height: 100px;
  width: 400px;
  border: 1px solid #ddd;
}

div {
  margin: 40px;
  position: relative;
  display: inline-block;
  border-radius: 4px;
  overflow: hidden;
}

div:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 5px;
  background: linear-gradient(to right, #ee585b 0%,#ee585b 33%,#ee585b 33%,#f8d270 33%,#f8d270 66%,#f8d270 66%,#20b5ca 66%,#20b5ca 100%);
  bottom: 0;
}

<div><textarea></textarea></div>

在这里，除了使用 :after 伪元素并为其设置渐变外，我什么也没做。休息，我使用定位将其设置到底部，然后我在包装器上使用 overflow: hidden; 以确保它获得 border-radius 效果并且是 < strong>不 边缘尖锐。

还有其他方法可以做到这一点，通过设置 :before 或 :after 伪元素以及另一个杂散元素并为所有元素设置 background三个，但这根本不是最佳选择。

---

Note: Make sure you use class or an id in your HTML for this particular textarea and change my CSS selectors accordingly. Am using basic tag level selectors just for the demonstration purpose.