Make :Focus Change CSS of Another Class

Make :focus change css of another class

Using pseudo-classes (such as :hover or :focus) to modify other elements can only be done if the other elements are siblings or children of the element which has the pseudo-class. That's because CSS child/sibling selectors are fairly restrictive.

You can use the > selector to select a direct child, and the + selector to select a direct sibling. For example, if you have the following HTML:

<form>
    <input type="text" />
    <input type="submit" />
</form>
<p class="arbitrary">
    This is an arbitrary element. It is neither a child nor sibling of 
    the text field. It cannot be selected as a result of a pseudo-class 
    action on the textfield using CSS, but can be selected using 
    client-side scripting such as JavaScript.
</p>

You could style the button when the text field has focus (because it is a direct sibling of the text field), but there is no possible way to style the arbitrary paragraph as a result of the text field receiving focus (because it is neither a child nor sibling, it is the sibling of a parent) without using client-side scripting (JavaScript, jQuery, etc.).

This CSS would style the submit button, and can be altered to select any direct or indirect child or sibling:

input[type="text"]:focus + input[type="submit"] {
    /* some sweet CSS */
    background-color:green;
}

Using Javascript, of course, you have much greater flexibility. The focusin and focusout events can be used to toggle CSS classes. Here's an example that demonstrates both the CSS and JavaScript techniques of achieving this.

function setFocused() {
  document.querySelectorAll('.arbitrary').forEach((result) => {
    result.classList.add('focused');
  });
}

function unsetFocused() {
  document.querySelectorAll('.arbitrary').forEach((result) => {
    result.classList.remove('focused');
  });
}

document.querySelectorAll('input[type="text"]').forEach((result) => {
  result.addEventListener("focusin", setFocused);
  result.addEventListener("focusout", unsetFocused);
});

input[type="text"]:focus + input[type="submit"] {
  /* some sweet CSS */
  background-color: green;
}

.arbitrary.focused {
  /* even more sweet CSS */
  color: red;
}

<form>
  <input type="text" />
  <input type="submit" />
</form>

<p class="arbitrary">
  This is an arbitrary element. It is neither a child nor sibling of
  the text field. It cannot be selected as a result of a pseudo-class
  action on the textfield using CSS, but can be selected using
  client-side scripting such as JavaScript.
</p>

css on focus change another div's styling

Check out this CodePen Demo. You'll need to move your input before your SVG, otherwise you'll have to use some JavaScript to do this, because CSS doesn't have a "look behind" selector of any kind. Even the General Sibling Combinator only looks ahead of the current selector target.

If you move the input first, you can just do:

.input:focus + svg #Icon-Search {
  fill: #64e469;
}

If you do want to keep the current structure, the JavaScript would look something like on this Demo

let search  = document.getElementsByClassName('inputSearchField');
let svgFill = document.getElementById('Icon-Search');

search[0].onfocus = function(){ svgFill.style.fill = '#64e469'; }
search[0].onblur  = function(){ svgFill.style.fill = '#b3b3b3'; }

You can see it's a fair bit more tedious!

Use :hover to modify the css of another class?

It's not possible in CSS at the moment, unless you want to select a child or sibling element (trivial and described in other answers here).

For all other cases you'll need JavaScript. jQuery and frameworks like Angular can tackle this problem with relative ease.

[Edit]

With the new CSS (4) selector :has() guide from CSS4.Rocks (archived by Wayback Machine) and :has() guide from MDN Web Docs, you'll be able to target parent elements/classes, making a CSS-Only solution viable in the near future!

focusing on an element changes another's CSS

There were a few problems with your styles. Firstly your selector to target the box isn't quite right.

.Hdr_nav_search_input:focus .Hdr_nav_search_box

That is applying selecting all .Hdr_nav_search_box where they are a descendant of .Hdr_nav_search_input. It's actually a sibling so you want to use the next sibling selector +:

.Hdr_nav_search_input:focus + .Hdr_nav_search_box

---

Secondly this selector would be overriding your colour change if it was working.

.Hdr_nav_search_box span,.Hdr_nav_search_box i{
    ...
}

You could use simply

.Hdr_nav_search_box {
    ...
}

---

Here is a demo and the style changes I made to get it working.

jsFiddle

.Hdr_nav_search_input:focus + .Hdr_nav_search_box {
    color: #F00;
 }
.Hdr_nav_search_box {
    line-height: 25px;
    color: gray;
}

Use :hover, :focus to change another css outside the hovered class

Since you can't select parent elements inside CSS (wait for possible CSSv4 solution), use JS for that. On hover add class to parent element

$(document).ready(function () {
  $('.flex-align i').hover(
    function () {
      $(this).closest('.parent-wrapper').addClass('hover');
    },
    function () {
      $(this).closest('.parent-wrapper').removeClass('hover');
    }
  )
});

.flex-align {
    display: flex;
    justify-content: start;
    align-items: center;
}

.nav-dropdown {
    display: none !important;
    width: auto !important;
}
.hover .nav-dropdown {
    display: block !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="parent-wrapper">
  <div class="flex-align">
      <i class="fa fa-arrow-right dropdown-icon"></i>
      <p>Main test</p>
  </div>
  <ul class="nav-dropdown">
      <li><a href="#">test 1</a></li>
      <li><a href="#">test 2</a></li>
      <li><a href="#">test 3</a></li>
  </ul>
</div>

change separate element style on focus on other element

You can't. It's only possible if the element is a sibling or a child of the :focus.

Either use Javascript, or put put the div inside the nav (which might not be what you're looking for if you can't change your DOM tree).

#nav input[type=text]:focus~#two {
  color: red;
}

<div id=nav>
  <input type="text" placeholder="Search" name="search">
  <div id="two">Two jfjsoijfoisoivnosnovdnsnnoivnoinsionvonoiniso</div>
</div>

If an input is focused, then how to change the properties of a different class in the Sass?

You need 2 things:

1. Remove & from this par of code input:focus & + .icon;
2. Move <div className="icon"></div> under input. "+" it combines two sequences of simple selectors having the same parent and the second one must come IMMEDIATELY after the first.

Changing CSS of one element based on another element focus/active state

You will need to use CSS combinators

Put this in your code:

.home-search-input:focus ~ .input-group-append > button {
  box-shadow: 0 1px 1px 0 rgba(65,69, 73, 0.3), 0 1px 3px 1px rgba(65,69, 73, 0.15) !important;
  background-color: red;
}

This (in words) means When input is focused, change button that is in (> sign) .input group that is next to (~ sign) input

This would be your code:

.home-search-input {  border-right: 0;  background-clip: border-box !important;  background: #e9e9e9;  transition: box-shadow ease-in-out .2s;}
.home-search-input:focus,.home-search-input:active,{  background: #ffffff;  box-shadow: 0 1px 1px 0 rgba(65, 69, 73, 0.3), 0 1px 3px 1px rgba(65, 69, 73, 0.15);}
.home-search-input:focus~.input-group-append>button,.home-search-input:active~.input-group-append>button {  background: #ffffff;  box-shadow: 0 1px 1px 0 rgba(65, 69, 73, 0.3), 0 1px 3px 1px rgba(65, 69, 73, 0.15);}
.home-search-btn {  background: #e9e9e9;  font-size: 15px !important;  padding: 6px 12px !important;  /* border-radius: 23.79px 23.79px 23.79px 23.79px; */  color: black;  border: 1px solid #ced4da;  border-left: none;}

<form>  <input type="text" class="form-control home-search-input" placeholder="Recipient's username">  <div class="input-group-append">    <button class="btn btn-outline-secondary home-search-btn" type="button" id="button-addon2">Button</button>  </div></form>

---

Related Topics