CSS: Change parent on focus of child

by

You can now do this in pure CSS, so no JavaScript needed 😁

The new CSS pseudo-class :focus-within would help for cases like this and will help with accessibility when people use tabbing for navigating, common when using screen readers.

.parent:focus-within {
  border: 1px solid #000;
}

The :focus-within pseudo-class matches elements that either themselves
match :focus or that have descendants which match :focus.

Can I use…

You can check which browsers support this by visiting http://caniuse.com/#search=focus-within

Demo

fieldset {
  padding: 0 24px 24px !important;
}

fieldset legend {
  opacity: 0;
  padding: 0 8px;
  width: auto;
}

fieldset:focus-within {
  border: 1px solid #000;
}

fieldset:focus-within legend {
  opacity: 1;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <form>
    <fieldset>
      <legend>Parent Element</legend>
      <div class="form-group">
        <label for="name">Name:</label>
        <input class="form-control" id="name" placeholder="Enter name">
      </div>
      <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" class="form-control" id="email" placeholder="Enter email">
      </div>
    </fieldset>
  </form>
</div>

More Related Contents:

  1. AngularJS: Better way to watch for height change
  2. Input type="text" with select functionality after clicking on Input type="text"
  3. jQuery .animate function not responding properly
  4. how i can connect and login in mysql localhost in php by using this html code
  5. how to proportionally scale a div with images inside?
  6. How to create blog posts with HTML and CSS? [closed]
  7. How to create a tag with Javascript?
  8. Navbar dropdown (collapse) is not working in Bootstrap 5
  9. Can I use HTML tags in the options for select elements? [duplicate]
  10. How to validate inputs dynamically created using ng-repeat, ng-show (angular)
  11. How to Increase browser zoom level on page load?
  12. JS function named `animate` doesn’t work in Chrome, but works in IE
  13. How do I re-trigger a WebKit CSS animation via JavaScript?
  14. Change an image with onclick()
  15. Image loaded event in for ng-src in AngularJS
  16. Why element.style always return empty in JS?
  17. make html text input field grow as I type?
  18. Multicolor Text Highlighting in a Textarea or Text Input
  19. jQuery in Chrome returns “block” instead of “inline”
  20. AngularJS – placeholder for empty result from filter
  21. Vue.js data-bind style backgroundImage not working
  22. How to scroll to an element in jQuery?
  23. How to create a collapsing tree table in html/css/js?
  24. Prevent iOS bounce without disabling scroll ability
  25. IE6 Hover Issue
  26. Detect if dropdown navigation would go off screen and reposition it
  27. Iframe inherit from parent
  28. Rename Object Key in an array using javascript
  29. Bootstrap Dropdown menu is not working
  30. Get All Elements in an HTML document with a specific CSS Class

Leave a Comment