Input with border for half height

Question

I need to create an input text box with a bottom border and the side borders should span half the height of the input on left and right.

Is there a

Answer 1

Maybe this could be an elegant solution.

If you use background then you can specify really nicely where what goes and it improves readability a bit.

input[type="text"] {
  padding: 10px;

  background: linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000);
  background-size: 1px 20%, 100% 1px, 1px 20%;
  background-position: bottom left, bottom center, bottom right;
  background-repeat: no-repeat;

  border: none;
  color: #999;
}

<input type="text" />