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;