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

Question

我想知道是否可以改变文本框的形状，所以它会是一个矩形，但它的开头是“取出”的？我附上了一个示例图像。

我在 css 中找到了关于 clip-path: polygon 但它只接受四个坐标。

提前致谢！

标签： htmlcsstextbox

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>