html - 如何给输入边框左右小长度

Question

我需要显示输入字段，我需要给边框 bottom ， left 和 right 。但在这里我只想要左边和右边的一小部分边框。

.solid {
  border-style: solid;
  border-left-style: dashed;
  border-top: none;
  border-right-style: dashed;
}

<input class="solid">

Answer 1

您可以使用 box-shadow 来创建这种类型的边框。

input {
  width: 300px;
  border: none;
  margin: 50px;
  height: 35px;
  box-shadow: 13px 13px 0px -10px #000000, -13px 13px 0px -10px #000000;
  outline: none;
  font-size: 22px;
  background: none;
}

<input type="text">