A Pen by Pascal.

Android-Holo-Input-Field-Using-CSS3-Backgrounds.markdown

Android Holo Input Field Using CSS3 Backgrounds

I was looking for a solution to style an input field to look like the Holo Light theme of Android 4.x, but every solution needed additional markup.

That wasn't good enough for me, so I thought about this for a minute and had an idea: Multiple background images, positioned along the bottom of the input field, sized correctly using background-size. By using linear-gradient instead of images, it is quite easy to change colors.

Tested on Chrome 32 and Android 4.3. Use at your own risk.

A Pen by Pascal on CodePen.

License.

index.html

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

style.scss

@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);
  }
}