是否可以自定义文本框的形状？

Question

我想知道是否可以更改文本框的形状，因此它将是一个矩形，但是其开头是“取出”的？我附上了示例图片。

我发现了css中的clip-path：多边形，但是它只接受四个坐标。

谢谢！

Answer 1

检查以下代码，看看这是否是您想要的：

.field {
  position: relative;
  margin-bottom: 20px;
}
.field label {
  position: absolute;
  min-width: 100px;
  border: 1px solid;
  border-top-color: #fff;
  border-left-color: #fff;
}
.field input[type="text"] {
  padding: 10px 10px 10px 110px;
  border: 1px solid;
  outline: none;
}

<div class="field">
  <label for="status">Status</label>
  <input type="text" id="status">
</div>
<div class="field">
  <label for="givenname">Given Name</label>
  <input type="text" id="givenname">
</div>
<div class="field">
  <label for="surname">SurName</label>
  <input type="text" id="surname">
</div>