...">
Geek Answers Handbook

Make: change css focus of another class

Let's say I have the following code:

HTML

<div class="container">
   <input class="myAwesomeInputBox">
</div>

CSS

.input [type=text]:focus > .//ANY CLASS SOMEWHERE ON THE WEBSITE{
   //Some sweet CSS.
}

Obviously this code does not work. I want some particular css to execute when it focuses on my input box. Is it even possible?

I am not specifically looking for html / css solutions. Any solution that can achieve this is welcome.

My code above is just a simple example. My question is very simple. Is it possible to change the style on any element on your website using: focus on the input field.

+4
source share
2 answers

, , (, :hover :focus). , / CSS .

> + . , 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>

, ( ), - , ( , , ) (JavaScript, jQuery ..).

CSS , :

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

Javascript, , . focus blur ( Firefox focusin focusout) CSS. , CSS JavaScript .

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("focus", setFocused);
  result.addEventListener("blur", 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>
Hide result

jQuery , .

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

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

, , - , "", "", JavaScript mouseover mouseout jQuery .hover(), ( , - ).

+11

,

<div class="container">
   <input class="myAwesomeInputBox" id='myAwesomeId' type="text">
</div>

, . .

$('#myAwesomeId').on({
    focus: function () {
        $(this).addClass('focused');
    },

    blur: function () {
        $(this).removeClass('focused');
    }
});

CSS

input.focused {
    border:3px solid blue;
}

FIDDLE

+2

More articles: