The below code snippet explains how to highlight form fields like HTML input textbox, input password, select dropdown and textarea on focus using jQuery and CSS.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type = "text/css">
.focus{border: 1px solid #FFB000;outline: none;}
.blur{border: 1px solid #CCCCCC;outline: none;}
</style>
</head>
<body>
<form>
<script type = "text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type = "text/javascript">
$(function () {
$("input[type=text], input[type=password], textarea, select").each(function () {
$(this).addClass("blur");
$(this).focus(function () {
$(this).removeClass("blur").addClass("focus");
});
$(this).blur(function () {
$(this).removeClass("focus").addClass("blur");
});
});
});
</script>
TextBox: <input type = "text" /><br /><br />
Password: <input type = "password" /><br /><br />
Textarea: <textarea cols = "5" rows = "10"></textarea><br /><br />
Select:
<select>
<option>Please select</option>
<option>Female</option>
<option>Male</option>
</select>
</form>
</body>
</html>
Explanation:
Above I have created 2 CSS classes in Style Tags in the HEAD section
- focus (will be applied when the HTML control has focus)
- blur (will be applied when the HTML control has focus)
Next I am executing an each loop on all the form fields (input[type=text],input[type=password], textarea, select) in the load event of the page. In the loop I have attached focus and blur events to the HTML form fields. In these events I simply add and remove the focus and blur CSS classes so that when a control is focused it is highlighted and when it loses focus it should get back to normal.
The above CSS only changes the color of the border. But you can modify it as per your needs by simply editing the two CSS classes.
Demo: