jquery background-color change on focus and blur

Question

I have the following problem  I have a form with three text input fields  and I want to change the background-color when one of the fields has focus  and get it set back when it loses focus  I have come up with the following code   HTML  simplified     lt form gt   lt input class  calc input  type  text  name  start date  id  start date    gt   lt input class  calc input  type  text  name  end date  id  end date    gt   lt input class  calc input  size  8  type  text  name  leap year  id  leap year    gt   lt  form gt    jQuery    document  ready function            input text   focus      function              this  css   background-color      FFFFEEE                     input text   blur      function              this  css   background-color      DFD8D1                   Thanks

User · Answer

Even easier  just CSS can resolve the problem   input type  text    input type  password    textarea  select        width  200px      border  1px solid      border-color   C0C0C0  E4E4E4  E4E4E4  C0C0C0      background   FFF      padding  8px 5px      font  16px Arial  Tahoma  Helvetica  sans-serif      -moz-box-shadow  0 0 5px  C0C0C0      -moz-border-radius  5px      -webkit-box-shadow  0 0 5px  C0C0C0      -webkit-border-radius  5px      box-shadow  0 0 5px  C0C0C0      border-radius  5px    input type  text   focus  input type  password   focus  textarea focus  select focus        border-color   B6D5F7  B6D5F7  B6D5F7  B6D5F7      outline  none      -moz-box-shadow  0 0 10px  B6D5F7      -webkit-box-shadow  0 0 10px  B6D5F7      box-shadow  0 0 10px  B6D5F7

User · Answer

Tested Code      input   css  background   red      Complete      input text   focus function            this  css    background    Black              input text   blur function            this  css    background    red            Tested in version   jquery-1 9 1 js  jquery-ui-1 10 3 js

User · Answer

FFFFEEE is not a correct color code  Try with  FFFFEE instead

User · Answer

What you are trying to do can be simplified down to this     x000D   x000D     input text   bind  focus blur   function     x000D        this  toggleClass  red    x000D      x000D  input  x000D      background  FFFFEE  x000D    x000D   red  x000D      background-color red  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   x000D   lt form gt  x000D       lt input class  calc input  type  text  name  start date  id  start date    gt  x000D       lt input class  calc input  type  text  name  end date  id  end date    gt  x000D       lt input class  calc input  size  8  type  text  name  leap year  id  leap year    gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

in code there should be coma    not colon      the code must be    this  css   background-color      FFFFEE      i hope it helps   regards Saleha

[jquery] jquery background-color change on focus and blur

Examples related to jquery

Examples related to input

Examples related to background-color