Changing the form field background color with jquery

Question

I have this small code and I am trying to change the background color of the field when I click on it to write, for example if I click in "email" field I want the field to turn yellow so it looks better. I searched but I don't know I couldnt find a soultion becuase I am not really familar with jquery.

<div class="content">
    <div class="row">
    <div class="left">First name</div>
    <div class="right"><input name="Text1" type="text" class="text" /></div>
    <div class="clear"></div>
    </div>
    <div class="row">
    <div class="left">Last name</div>
    <div class="right"><input name="Text1" type="text" class="text" /></div>
    <div class="clear"></div>
    </div>
    <div class="row">
    <div class="left">Email</div>
    <div class="right"><input name="Text1" type="text" class="text" /></div>
    <div class="clear"></div>
    </div>
    <div class="row">
    <div class="left">Password</div>
    <div class="right"><input name="Text1" type="text" class="text" /></div>
    <div class="clear"></div>
    </div>
    </div>

jquery

$(document).ready(function()
   {
   $('.left, .content input, .content textarea, .content select').focus(function(){
   $(this).parents('.row').addClass("over");
   }).blur(function(){
   $(this).parents('.row').removeClass("over");
   });
   });

css

body{
    font-family:Arial, Helvetica, sans-serif;
    font-size: 13px;
    }
    .content{
    padding:10px;
    width:370px
    }
    .left{
    width:150px;
    float:left;
    padding:7px 0px 0px 7px;
    min-height:24px;
    }
    .right{
    width:200px;
    float:left;
    padding:5px;
    min-height:24px;
    }
    .clear{
    float:none;
    clear:both;
    height:0px;
    }
    .row{
    background-color:none;
    display:block;
    min-height:32px;
    }
    .text{
    width:190px;
    }
    .ruler{
    width:400px; border-bottom:dashed 1px #dcdcdc;
    }
    tr:focus{
    background-color:#fcfcf0;
    }
    td{
    vertical-align:top;
    }
    .over{
    background-color:#f0f0f0;
    }
    .out{
    background-color:none;
    }

Whoever can help me with the solution, thanks a lot.

Bhautik · Accepted Answer · 2021-05-01 17:03:33Z

You can get email type and add class based on that

JQuery

if( $(this).attr("type") == 'email' ){
    $(this).parents('.row').addClass("email");
}

CSS

.over.email{
    background-color:#FFFF00;
}

$(document).ready(function(){
   $('.left, .content input, .content textarea, .content select').focus(function(){
      $(this).parents('.row').addClass("over");
      if( $(this).attr("type") == 'email' ){
          $(this).parents('.row').addClass("email");
      }
   }).blur(function(){
      $(this).parents('.row').removeClass("over");
      if( $(this).attr("type") == 'email' ){
          $(this).parents('.row').removeClass("email");
      }
   });
});

body{
    font-family:Arial, Helvetica, sans-serif;
    font-size: 13px;
    }
    .content{
    padding:10px;
    width:370px
    }
    .left{
    width:150px;
    float:left;
    padding:7px 0px 0px 7px;
    min-height:24px;
    }
    .right{
    width:200px;
    float:left;
    padding:5px;
    min-height:24px;
    }
    .clear{
    float:none;
    clear:both;
    height:0px;
    }
    .row{
    background-color:none;
    display:block;
    min-height:32px;
    }
    .text{
    width:190px;
    }
    .ruler{
    width:400px; border-bottom:dashed 1px #dcdcdc;
    }
    tr:focus{
    background-color:#fcfcf0;
    }
    td{
    vertical-align:top;
    }
    .over{
    background-color:#f0f0f0;
    }
    .over.email{
    background-color:#FFFF00;
    }
    .out{
    background-color:none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
    <div class="row">
    <div class="left">First name</div>
    <div class="right"><input name="Text1" type="text" class="text" /></div>
    <div class="clear"></div>
    </div>
    <div class="row">
    <div class="left">Last name</div>
    <div class="right"><input name="Text1" type="text" class="text" /></div>
    <div class="clear"></div>
    </div>
    <div class="row">
    <div class="left">Email</div>
    <div class="right"><input name="Text1" type="email" class="text" /></div>
    <div class="clear"></div>
    </div>
    <div class="row">
    <div class="left">Password</div>
    <div class="right"><input name="Text1" type="text" class="text" /></div>
    <div class="clear"></div>
    </div>
    </div>

danicotra · Accepted Answer · 2021-05-01 16:51:14Z

1

You've done it right, just change the CSS rule, like this for instance:

.over{
background-color:#ffff00;
}

answered May 1, 2021 at 16:51

danicotra

1,5292 gold badges18 silver badges35 bronze badges

1 Comment

danicotra Over a year ago

happy coding @qoke :)

Hrahat Tahmazyan · Accepted Answer · 2021-05-01 16:47:24Z

0

You can bind an event handler to the "focus" for only the email input, for example:

$(document).ready(function () {
    $('[name=email]').focus(function () {
      $(this).parents('.row').addClass("over");
    }).blur(function () {
      $(this).parents('.row').removeClass("over");
    });
  });

answered May 1, 2021 at 16:47

Hrahat Tahmazyan

913 bronze badges

Collectives™ on Stack Overflow

Changing the form field background color with jquery

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related