:focus simultaneously with input of button and search

Question

I am attempting to give an input of text and an button pseudo :focus. I can do that, no problem. What is my problem is though is I want when I click on the input of text, that it not only changes the elements on the input text but also the button. Is this possible in JS? Would you just create a function saying when that is clicked change the elements of that? Or even in jQuery?

Answer 1

Here it goes:

#inputText:focus{
  border: 1px dashed black;
}
#inputText:focus ~ #button {
  background: red;
}

https://jsfiddle.net/fxzuu3yz/

Answer 2

I'm pretty sure you're looking for a jQuery way of doing this:

 function update() { $(this).parent().toggleClass("active"); } $(".main input").on("focus", update); $(".main input").on("blur", update); 

 .active input { border: 1px dashed black; } .active button { background:red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main"> <input type="text" /> <button>Go!</button> </div>