CSS, как стилизовать родительский элемент, когда текстовая область находится в фокусе?

Question

У меня есть следующее

<div class="comment-wrap">
 <textarea></textarea>
</div>

Всякий раз, когда текстовая область находится в фокусе, я хочу стилизовать div для комментариев. Я пробовал:

#hallPost-inner + textarea:focus {
    background: red;
}

Это не работает. Любые идеи о том, как я могу стилизовать div комментариев-переносов, когда текстовая область находится в фокусе, то есть курсор мигает в текстовой области и пользователь может печатать?

Спасибо

Answer 1

Не уверен, что такое #hallPost-inner, но в целом селекторы CSS не могут подниматься, это означает, что вам нужно иметь селектор textarea:focus, но тогда нужно будет стилизовать элемент-предок, что невозможно сделать в css. Вот хороший ресурс, среди многих других.Ссылка показывает, как можно легко достичь решения javascript.

Answer 2

Используйте псевдоселектор :focus-within.Обратите внимание, что любой ребенок в фокусе будет влиять на родителя.Если у вас больше детей и вы просто хотите подать заявку, когда событие достигнет <textarea>, вам понадобится JS.

Ссылка для получения дополнительной информации. (css-tricks)

Пример:

form{
  padding: 20px;
  background-color: gainsboro
}

input{
  text-align: center
}

form:focus-within {
  background-color: yellow
}

<form>
  <input type="text" placeholder="name">
  <input type="text" placeholder="lastname">
  <input type="button" value="Go!">
</form>

Примечание : не все браузеры поддерживают :focus-within

Answer 3

С помощью JavaScript и jQuery вы можете сделать:

$("textarea").live("focus", function(e) {
    $(this).closest(".comment-wrap").css({
        "background": "red"
    });
});