Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

CSS form highlight

Tuesday, March 19th, 2013 by Servage

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;
}
CSS form highlight, 4.0 out of 5 based on 3 ratings
Categories: Guides & Tutorials, Tips & Tricks

Keywords: ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.