Skip to Menu
jQuery » focus fields

Add an outline and background to text inputs when they are given focus.

Source code available from GitHub or a Zipped download.

Parameters

  • oColour - Outline colour
  • oWidth - Outline width
  • bgColour - Background colour
  • textColour - Text Colour

Examples

  • Default settings: $("input.text, textarea.text").focusFields()
  • Different outline color: $("input.text, textarea.text").focusFields("#f0f")
  • Different width: $("input.text, textarea.text").focusFields(null, 6)
  • Different background and text colour: $("input.text, textarea.text").focusFields(null, null, "#00f", "#0ff")

Test Form

Click one of the examples above then click one of the fields below:

Limitations

If the fields aren't given a border, they will get an inset one if a background colour is applied via the plugin. So to prevent this from happening, you could simple have this in your stylesheet. Also, Opera applies a tranparent background, so you may want to add a white background as well.

 input.text, textarea.text {
	border: 1px solid #000;
	background: #fff;
}

And apply the class 'text' to any elements this plugin is applied to.