css focus input change another element

Salsabeel woh woh answered on May 22, 2022 Popularity 8/10 Helpfulness 2/10

answer css focus input change another element

css focus input change another element

Comment

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() {
  var results = document.querySelectorAll('.arbitrary');
  for (result of results) {
    result.classList.add('focused');
  }
}

function unsetFocused() {
  var results = document.querySelectorAll('.arbitrary');
  for (result of results) {
    result.classList.remove('focused');
  }
}

var results = document.querySelectorAll('input[type="text"]');
for (result of results) {
  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>
Expand snippet
Here's the jQuery equivalent of the above code, if that's your jam.

$('input[type="text"]').on('focus', function() {
    $('.arbitrary').addClass('focused');
});

$('input[type="text"]').off('focus', function() {
    $('.arbitrary').removeClass('focused');
});
Note that if you decide you want to do something similar,
except using a "hover" trigger rather than "focus", you can use the JavaScript
mouseover and mouseout functions, or the jQuery .hover() function which takes 
two arguments (a handler for entering the hover and another for leaving
the hover).

Popularity 8/10 Helpfulness 2/10 Language css

Source: Grepper

Tags: css element focus input

Link to this answer
Share Copy Link

Contributed on May 22 2022

Salsabeel woh woh

0 Answers Avg Quality 2/10

css focus input change another element

Contents

More Related Answers

css focus input change another element

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.