How to highlight the form fields using css and jquery
<style type="text/css">
.setFocus
{
border: solid 2px #95ce61;
background: #fff;
color: #000;
}
.setIdle
{
background: #fff;
color: #6F6F6F;
border: solid 2px #DFDFDF;
}
</style>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('input, textarea, select').addClass("setIdle");
$('input, textarea, select').focus(function () {
$(this).removeClass("setIdle").addClass("setFocus");
});
$('input, textarea, select').blur(function () {
$(this).removeClass("setFocus").addClass("setIdle");
});
//Applying MSIE Check
if ($.browser.msie) {
$("select").bind("focusin", function () {
$(this).addClass("setFocus");
});
$("select").bind("focusout", function () {
$(this).removeClass("setFocus");
});
}
});
</script>
Now let's understand. We have declared two css classes setIdle and setFocus. The only discussable thing in both classes is margin property through which I am handling all the highlighting of form fields in onfocus event.
After this I have code written in jquery that will call these classes for form fields against desired events such as focus and blur. I am just assigning setFocus class for focus event of form elements and then calling setIdle class for blur event of form elements. Normally form fields/elements are categorized in three categories
- Input
- Textarea
- Select
To cover all these fields I have written following line of code
$('input, textarea, select').addClass("setIdle");
So this is the proper way to highlight form fields using jquery and css. Hope it will work for you.
