Stylish underline when input is focused, modern browsers only

Question

I've got a text input element which is decorated with an underline. The underline goes up half the height of the input on either side of it and turns blue when the input is focused. It's similar to how inputs look on Android devices.

Here's a JSFiddle and some accompanying code.

<span class="input-underline-wrapper">
    <input placeholder="Search..." type="text" value="">
    <div class="underline"></div>   
</span>

//  Start:normalize
*, *:before, *:after {
    box-sizing: border-box;
}

input:focus {
    outline: none 
}
//  End:normalize

.input-underline-wrapper {
    display: inline-block;
    width: 100%;
}

input {
    width: calc(100% - 2px);
    margin-left: 1px;
    padding-bottom: 2px;
}

input[type=text] {
    border: 0;
    cursor: text;
}

.underline {
    background-color: #ebebeb;
    transition: color 0.3s, background 0.3s, border 0.3s, text-shadow 0.3s;
    z-index: 0;
    height: 5px;
    margin-top: -4px;
    width: 100%;
}

input:focus ~ .underline {
    background-color: #4EA6EA;
}

This all works well and good, but it feels a bit verbose. I'm wondering if I've missed something simple here. Is it possible to achieve the same effect using a white box-shadow which covers the upper-half of the input and omit using a wrapper and a second, underlining div? I only need to support the latest version of Google Chrome.

Answer 1

Using box-shadows on the input can let you have the same underlining effect without any wrapper or unsemantic markup + strip your CSS a lot :

input[type=text] {
  height:17px;
  border: 0;
  width: calc(100% - 2px);
  margin-left:1px;
  box-shadow: -8px 10px 0px -7px #ebebeb, 8px 10px 0px -7px #ebebeb;
  -webkit-transition: box-shadow 0.3s;
  transition: box-shadow 0.3s;
}
input[type=text]:focus {
  outline: none;
  box-shadow: -8px 10px 0px -7px #4EA6EA, 8px 10px 0px -7px #4EA6EA;
}

<input placeholder="Search..." type="text" value=""/>

For browser support :

• box-shadows : IE9+
• transitions : IE10+
• calc() : IE9+

Answer 2

Your HTML markup is invalid: a <span> should never contain a <div>. However, you may swap them, such that the <div> contains a <span>.

Answer 3

You talk about omitting the wrapper, you really don't need to do much differently here,

I removed the Wrapper and the CSS that went along with it, and nothing changed in the JSFiddle

My Fiddle

It's not good to have a whole bunch of HTML that you don't need, it makes things weird.

The same goes for CSS, the more CSS that you have the more CSS gets interpreted by the browser and the better chance you have of CSS overwriting itself.

---

input:focus {
    outline: none 
}

input {
    width: calc(100% - 2px);
    margin-left: 1px;
    padding-bottom: 2px;
}

input[type=text] {
    border: 0;
    cursor: text;
}

.underline {
    background-color: #ebebeb;
    transition: color 0.3s, background 0.3s, border 0.3s, text-shadow 0.3s;
    z-index: 0;
    height: 5px;
    margin-top: -4px;
    width: 100%;
}

input:focus ~ .underline {
    background-color: #4EA6EA;
}

<input placeholder="Search..." type="text" value="" />
<div class="underline"></div>   

---

Let's check it out in the fancy Stack Snippets tool and see how it stacks up to JSFiddle

input:focus {
    outline: none 
}

input {
    width: calc(100% - 2px);
    margin-left: 1px;
    padding-bottom: 2px;
}

input[type=text] {
    border: 0;
    cursor: text;
}

.underline {
    background-color: #ebebeb;
    transition: color 0.3s, background 0.3s, border 0.3s, text-shadow 0.3s;
    z-index: 0;
    height: 5px;
    margin-top: -4px;
    width: 100%;
}

input:focus ~ .underline {
    background-color: #4EA6EA;
}

    <input placeholder="Search..." type="text" value="" />
    <div class="underline"></div>