Сосредоточьтесь на нескольких элементах с их свойствами - PullRequest
Новая
       48

Сосредоточьтесь на нескольких элементах с их свойствами

0 голосов
/ 08 июня 2019

С учетом следующего кода HTML и CSS: 

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>

Как я могу активировать кнопку "[type = submit]: focus", когда я фокусируюсь на вводе [type = text]? Я пытался сделать что-то вроде: 

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

Но это не работает ... Есть идеи? Заранее спасибо!

Ответы [ 2 ]

2 голосов
/ 08 июня 2019

Вы не можете вложить этот CSS без препроцессора.

Вам нужно выбрать следующий элемент кнопки, когда фокус ввода находится в фокусе.Вы можете использовать селектор ~ : 

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>
0 голосов
/ 08 июня 2019

Все просто: ты не можешь. Вы можете сосредоточиться только на одном элементе за один раз.

Источник

...