Stylize input box as seen on android developer website, using css - css

Question

How to stylize input box like image below using pure "CSS". I know this can be done via jquery, but I am enthusiast if there is way to do so using CSS. I took image from Android's Developer website.
What I did is HTML,
<form>
<label>Email Address: </label>
<div class='left'></div>
<input type='text' class='input'/>
<div class='right'></div>
</form>
And CSS,
.left {
display:inline-block;
height:7px;
border-left:1px solid #ccc;
position:absolute;
margin-top:23px;
}
.right {
display:inline-block;
height:7px;
border-left:1px solid #ccc;
position:absolute;
margin-top:23px;
margin-left:-1px;
}
.input {
display:inline-block;
height:30px;
font-size:16px;
width:250px;
border:1px solid #ccc;
border-width:0px 0px 1px 0px;
padding:0px 5px;
outline:none;
}
.input:hover, .input:focus {
border-color:#4ab5d9;
}
What I am trying is => Also on jsfiddle link
The only problem is, I can't found way to change the color of left and right border on hover & on focus.

Answer 1

One option is this
I used the sibling selector to get the hover and focus working:
.input:hover, .input:focus,
.input:hover + .right,
.input:focus + .right {
border-color:#4ab5d9;
}
and removed the "left" div. Then made these changes to the right one:
margin-top:23px;
margin-left:-260px;
width:258px;
pointer-events: none;

Answer 2

I was having the same problem, and I've just created a style like this that doesn't require additional markup. See http://codepen.io/killercup/pen/CBeAq for a demo.
My solution was to use multiple background images (actually, linear-gradient) which are resized using background-size. It works on Android 4.3, but I haven't tested it on any other mobile platform.

Answer 3

The following works in Chrome (and supports focus/hover color changes) using the background CSS property without any additional tags in the HTML:
HTML:
<input type='text' class='holo'></input>
CSS:
input.holo[type='text'] {
/* You can set width to whatever you like */
width: 200px;
font-family: "Roboto", "Droid Sans", sans-serif;
font-size: 16px;
margin: 0;
padding: 8px 8px 6px 8px;
position: relative;
display: block;
outline: none;
border: none;
background: bottom left linear-gradient(#a9a9a9, #a9a9a9) no-repeat, bottom center linear-gradient(#a9a9a9, #a9a9a9) repeat-x, bottom right linear-gradient(#a9a9a9, #a9a9a9) no-repeat;
background-size: 1px 6px, 1px 1px, 1px 6px;
}
input.holo[type='text']:hover, input.holo[type='text']:focus {
background: bottom left linear-gradient(#0099cc, #0099cc) no-repeat, bottom center linear-gradient(#0099cc, #0099cc) repeat-x, bottom right linear-gradient(#0099cc, #0099cc) no-repeat;
background-size: 1px 6px, 1px 1px, 1px 6px;
}
Demo: http://jsfiddle.net/QKm37/