CODEWITHSUNDEEP
css
user1995997
user1995997

Reputation: 591

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

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.

input box

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.

Upvotes: 1

Views: 4781

Answers (3)

owencm
owencm

Reputation: 8884

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/

Upvotes: 2

Pascal
Pascal

Reputation: 2747

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.

Upvotes: 2

Andy
Andy

Reputation: 14575

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;

Upvotes: 6

Related Questions