css - HTML上带有CSS的自定义边框(检查图片)

是否有可能使用CSS在“定制字段”下执行此“行”？

最佳答案

Jbutler483的答案是减少标记的好方法。但是，如果必须支持早于ie9的浏览器，请使用此方法。另一个方法本质上是告诉浏览器渲染它。

.inputItem {
  padding-top: 5px;
  padding-left: 5px;
  margin-top: 5px;
  position: relative;
}
.inputItem textarea {
  margin: 0;
  min-height: 50px; /*optional*/
  min-width: 200px; /*optional*/
}
.before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  height: 100%;
  width: 30px;
  border: 2px solid gray;
  border-right: none;
}

Custom Input
<div class="inputItem">
  <div class="before"></div>
  <textarea placeholder="Enter some text! I'm resizable too!"></textarea>
</div>