Focus on multiple elements with their properties

Question

Given the following HTML and CSS code:

input[type=text] {
  background-color: red;
}

input[type=text]:focus {
  background-color: white;
}

button[type=submit] {
  background-color: blue;
}

button[type=submit]:focus {
  background-color: green;
}

<form method="get" id="searchform" action="index.php">
  <input type="text" placeholder="Search..." name="s" id="s" value="" autocomplete="off">
  <button class="search-button" type="submit">
    <span class="icon-search2"></span>
    </button>
</form>

How can I activate "button[type=submit]:focus" as well when I'm focusing on input[type=text]? I was trying to do something like:

input[type=text]:focus {
    background-color: white;
}
button[type=submit]:focus {
    background-color: green;
}

But it doesn't work... Any idea? Thanks in advance!

Answer 1

You cannot nest CSS like this without a preprocessor.

What you want is to select the next button element when the input is focused on. You can use the ~ selector:

input[type=text] {
  background-color: red;
}

input[type=text]:focus {
  background-color: white;
}

button[type=submit] {
  background-color: blue;
}

button[type=submit]:focus,
input[type=text]:focus~button[type=submit] {
  background-color: green;
}

<form method="get" id="searchform" action="index.php">
  <input type="text" placeholder="Search..." name="s" id="s" value="" autocomplete="off">
  <button class="search-button" type="submit">
      <span class="icon-search2">Click me</span>
    </button>
</form>

Answer 2

It's simple: you can't. You can only focus on one element at a time.

Source