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 an easy way to design this in CSS?

Image is show below:

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" />

Answer 2

With 2 box-shadows, you can achieve the bottom border and small borders on both sides. Here is an example:

input[type=text] {
  width:300px; height:17px;
  border: 0; outline:none;
  padding:0;
  box-shadow: -5px 5px 0px -4px #000, 5px 5px 0px -4px #000;
  text-align:center;
}

<input placeholder="Email" type="text" value=""/>

The spread radius and the X/Y offset of the box-shadows need to be tweaked according to the height of the input and the desired height of left/right borders. As you can see in this example with a different height on the input:

input {
  width:300px; height:40px;
  padding:0;
  border: 0; outline:none;
  box-shadow: -18px 18px 0px -17px #000, 18px 18px 0px -17px #000;
  text-align:center;
}

<input placeholder="Email" type="text" />

Browser support for box-shadows is IE9+.