Download highlight input script

Download files

You can download the entires script from this Zip file.

Configuration

This script is easy to configure. All you have to do is to define how the active input should be highlighted. This is done by CSS. Then you have to call a function at the bottom of your page to initialize the script.

Define CSS

Here's an example how I have created the CSS in this demo

.textInput,textarea{  /* General style for my inputs when they're not highlighted */
  width:300px;
  background-color:#FFFFFF;
  border:1px solid #000;
}

.inputHighlighted{  /* Highlighting style */
  background-color:#317082;
  color:#FFF;
  width:300px;
  border:1px solid #000;
}

.textInput,textarea is the rule for the inputs when they're not highlighted. I'm using a white background color and a black border. .inputHighlighted defines how the input should look like when it's active. Here, I have defined a dark green background color and a white text color. The border is defined as black.