How to change a div's css when input is focused

user_17001740 0
Viewed 41

it is a simple problem but i can't get through it, i am trying to highlight an input box when its focused, but all the div as i styled it differently to add icons inside of it.

here is my code:

input:focus .form-input {
    border: 2px solid var(--theme-color);
}

 <form>
                            <div class="form-input">
                                <i class="fa fa-user"></i>
                                <input type="text" id="username" name="username" placeholder="Enter Your Username"><br>
                            </div>
                            <div class="form-input">
                                <i class="fa fa-user"></i>
                                <input type="password" id="password" name="password" placeholder="Enter Your Password">
                            </div>
                        </form>
css html
2 Answers

As soon as we have widespread browser support for :has(), a solution would look like this:

.form-input:has(input:focus) {
  border: 2px solid orange;
}
<div class="form-input">
  <input type="text" id="username" name="username" placeholder="Enter Your Username" />
</div>

Currently this is only supported in Safari 15.4+ though, but it will soon come to all major browsers.

Until we have that, you can still work with the well-supported :focus-within pseudo class:

.form-input:focus-within {
  border: 2px solid orange;
}
<div class="form-input">
  <input type="text" id="username" name="username" placeholder="Enter Your Username" />
</div>

Please note that this solution comes with the drawback of triggering on any focusable element within div.form-control. You cannot limit it to certain elements.

user_37443040

The element you are trying to style (div.form-input) is the parent of that input. As far as I know there's currently no way for selecting parent elements based on child state in CSS (or at least not supported by all browsers).

You'd have to rely on js for that:

function highlight(evt) {
  // get parent with class .form-input
  var parent = evt.target.closest('.form-input');
  
  if (parent) {
    if (evt.type === 'focus') {
      // add highlight class on focus
      parent.classList.add('highlight');
    } else {
      // remove highlight class on blur
      parent.classList.remove('highlight');
    }
  }
}

// get all inputs of the form
document.querySelectorAll('form input')
  .forEach((input) => {
    // attach focus and blur events to toggle highlight class
    input.addEventListener('focus', highlight, true);
    input.addEventListener('blur', highlight, true);
  });
.form-input {
  display: inline-block;
  padding: 5px;
  border: 2px solid rgba(0,0,0,.1);
}

.form-input.highlight {
  border: 2px solid #000;
}
<form>
  <div class="form-input">
    <i class="fa fa-user"></i>
    <input
      type="text"
      id="username"
      name="username"
      placeholder="Enter Your Username"
    /><br />
  </div>
  <div class="form-input">
    <i class="fa fa-user"></i>
    <input
      type="password"
      id="password"
      name="password"
      placeholder="Enter Your Password"
    />
  </div>
</form>

user_67541090
Related