InapleGealten
New Member
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,\[code\]<form> <label>Email Address: </label> <div class='left'></div> <input type='text' class='input'/> <div class='right'></div></form>\[/code\]And CSS,\[code\].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;}\[/code\]What I am trying is => Also on jsfiddle linkThe only problem is, I can't found way to change the color of left and right border on hover & on focus.