Android Holo Input Field Using CSS3 Backgrounds

Holo Light theme of Android 4.x style for input field.

Demo

Markup

<form action="#">
  <input type="text" value="Hello World"/>
</form>

CSS

@import "compass";
@import "compass/css3";
@import url(http://fonts.googleapis.com/css?family=Roboto);
 
%base-font {
  font-family: "Roboto", "Droid Sans", sans-serif;
  font-size: 21px;
}
 
body {
  background: #eee;
  @extend %base-font;
}
 
form {
  max-width: 22em;
  margin: 3em auto;
  padding: 2em;
  background: #fff;
}
 
input {
  display: block;
  width: 100%;
  @extend %base-font;
 
  margin: 0;
  border: 0;
 
  @include appearance(none);
  border-radius: 0;
  outline: none;
}
 
// Make it Holo
 
$color-light: #666;
$color-lighter: #a9a9a9;
$color-active: #09c;
$color-disabled: #cecece;
 
$spacing-default: 12px;
$spacing-small: 8px;
$spacing-smaller: 6px;
$spacing-smallest: 2px;
 
@mixin holo-input-border($color: $color-active) {
  $bg: linear-gradient($color, $color);
  @include background(
    bottom left $bg no-repeat,
    bottom center $bg repeat-x,
    bottom right $bg no-repeat
    );
  @include background-size(
    $spacing-smallest $spacing-smaller,
    $spacing-smallest $spacing-smallest,
    $spacing-smallest $spacing-smaller
    );
}
 
input {
  background: transparent;
  position: relative;
  border: none;
  @include box-sizing(border-box);
  
  padding: $spacing-small $spacing-small $spacing-smaller;
 
  @include holo-input-border($color-lighter);
  
  &[disabled] {
    color: $color-lighter;
    @include holo-input-border($color-disabled);
  }
  
  &:focus {
    @include holo-input-border($color-active);
  }
}

Source