Servage Magazine

Do you know the standard web form blue highlight when you’re filling out a form? It’s pretty nice that you can see which field is active, where you’re currently editing, and browsers have simply introduced a standard blue glow or highlight around the particular form element to illustrate this. It looks good an fulfils it purpose, but did you know that you can actually customize this?

Pretty much anything rendered by the browser can be customized with CSS, and this form highlight is just one of them. Make use of that, and make your forms look like an integrated part of your website’s style. It just looks better :-)

Form HTML

<form action="#" method="post">
  <div>
    <label for="name">Text Input</label>
    <input type="text" name="name" id="name" value="" tabindex="1" />
  </div>
  <div>
    <label for="textarea">Textarea</label>
    <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
  </div>
</form>

Form CSS

input[type=text], textarea {
  @include transition(all 0.30s ease-in-out);
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}

input[type=text]:focus, textarea:focus {
  @include box-shadow(0 0 5px rgba(81, 203, 238, 1));
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(81, 203, 238, 1);
}

label {
  width: 150px;
  float: left;
}

body {
  padding: 20px;
}