changing div background color when clicking on input field

Question

I would like to change the color of the div that my input field is in when a user clicks on the input field to enter content and/or when they click in the div area. If the user decides to not enter any content or erase the content they entered in the input field it would go back to the default color.

The link below showcases what I would like to achieve. I currently have an active state set on the div to showcase what color I would like the div to change to. I realize that I will need to incorporate javascript to possibly achieve want I want to happen. Is anyone willing to give some assistance? Thanks.

Code: https://jsfiddle.net/L1ptj0ey/3/

HTML

.other-area {
    width: 100%;
    height: 3.5rem;
    margin-top: 1.2rem;
    margin-bottom: 1.6rem;
    background-color: #cccbc9;
    border-radius: 4px;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    padding-left: .9rem;
}

.other-area:active {
    background-color: #cd1e41;
    color: #FFF;
}

.other-input {
    border-top-right-radius: .4rem;
    border-bottom-right-radius: .4rem;
    height: 3.3rem;
    width: 19.3rem;
    margin-top: .1rem;
    margin-left: .9rem;
    padding-left: .5rem;
    color: #cccbc9;
    font-size: 1.4rem;
    font-weight: 600;
    font-family: "Source Sans Pro", sans-serif;
}

<div class="other-area">
    <span>Other Amount</span>
    <input type="number" name="otherAmount" value="$" class="other-input" />
</div>

vrintle · Accepted Answer · 2018-10-03 18:30:52Z

1

You can use focus and blur events of .other-input to change the styles of .other-area.

window.onload = function() {
  var div = document.getElementsByClassName('other-area')[0];
  var input = document.getElementsByClassName('other-input')[0];
  
  input.addEventListener('focus', function() {
    div.style.background = '#cd1e41';
    div.style.color = '#FFF';
  });
  
  input.addEventListener('blur', function() {
    div.style.background = '#cccbc9';
    div.style.color = '#000';
  });
}

.other-area {
    width: 100%;
    height: 3.5rem;
    margin-top: 1.2rem;
    margin-bottom: 1.6rem;
    background-color: #cccbc9;
    border-radius: 4px;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    padding-left: .9rem;
}

.other-input {
    border-top-right-radius: .4rem;
    border-bottom-right-radius: .4rem;
    height: 3.3rem;
    width: 19.3rem;
    margin-top: .1rem;
    margin-left: .9rem;
    padding-left: .5rem;
    color: #cccbc9;
    font-size: 1.4rem;
    font-weight: 600;
    font-family: "Source Sans Pro", sans-serif;
}

<div class="other-area">
    <span>Other Amount</span>
    <input type="number" name="otherAmount" value="$" class="other-input" />
</div>

answered Oct 3, 2018 at 18:30

vrintle

5,6263 gold badges19 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

vrintle Over a year ago

@troyofcreative Welcome! If this answer (or any further answers) had solved / helped you in the problem you were facing, then you can accept it by clicking the check mark

troyofcreative Dec 24, 2024 at 0:43

Thank you. Sorry the thank you has come so so so so so so late.

Collectives™ on Stack Overflow

changing div background color when clicking on input field

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related