CSS: изменение родителя в фокусе ребенка

Скажем, у вас есть что-то вроде:

<div class="parent">
    <input class="childInput" type="text" />
    <div class="sibling"></div>
</div>

Я хочу изменить внешний вид родительских/сиблингов, когда ребенок получает фокус. Есть ли какие-либо трюки CSS для такого рода вещей?

Редактировать:

Причина моего вопроса заключается в следующем:

Я создаю приложение Angular, которое нуждается в редактируемых текстовых полях. Он должен выглядеть как ярлык до щелчка, после чего он должен выглядеть как обычный ввод текста. Я написал текстовое поле на основе: focus для достижения этого эффекта, но текст обрезается границами ввода текста. Я также использовал ng-show, ng-hide, ng-blur, ng-keypress и ng-click для переключения между меткой и текстовым вводом на основе размытия, нажатия клавиш и кликов. Это отлично работает, за исключением одного: после метки ng-click = "setEdit (this, $ event)" изменяет логическое значение, используемое ng-show и ng-hide, для true, оно использует вызов jQuery для.select() ввод текста. Тем не менее, только после завершения ng-click все будет $ digest'd, поэтому текстовый ввод снова теряет фокус. Поскольку текстовый ввод никогда не получает фокуса, использование ng-blur для возврата назад к показу метки не работает. Пользователь должен щелкнуть по текстовому вводу, а затем снова щелкнуть его, чтобы вернуться к показу метки.

Редактировать:

Здесь приведен пример проблемы: http://plnkr.co/edit/synSIP?p=preview

Ответ 1

Теперь вы можете сделать это в чистом CSS, поэтому JavaScript не нужен.

Новый псевдо-класс CSS :focus-within поможет в подобных случаях и поможет с доступностью, когда люди используют табуляцию для навигации, обычную при использовании программ чтения с экрана.

.parent:focus-within {
  border: 1px solid #000;
}

Псевдокласс класса focus-in сопоставляет элементы, которые либо сами по себе соответствуют: фокус, либо у потомков, которые соответствуют: focus.

Вы можете проверить, какие браузеры поддерживают этот http://caniuse.com/#search=focus-within

Ответ 2

Нет никакого шанса, как это сделать с помощью CSS. CSS может стилизовать только братьев и сестер, детей и т.д., А не родителей.

Вы можете просто использовать JS следующим образом:

<style>
.parent {background: green}
.focused {background: red;}
</style>
<div class="parent">
    <input class="childInput" type="text" />
    <div class="sibling"></div>
</div>

<script>
$('.parent > *')
    .focus(function() {
        $('.parent').addClass('focused');
    })
    .blur(function() {
        $('.parent').removeClass('focused');
    });
</script>

http://jsfiddle.net/C4bZ6/

Этот код принимает все прямые дочерние .parent и если вы фокусируете один из них, focused класс добавляется к родительскому. При размытии этот класс удаляется.

Ответ 3

Вы можете использовать чистый CSS, чтобы текстовый ввод выглядел так, как будто это не текстовый ввод, если он не находится в фокусе

http://jsfiddle.net/michaelburtonray/C4bZ6/13/

input[type="text"] {
    border-color: transparent;
    transition-duration: 600ms;
    cursor: pointer;
    outline-style: none;
    text-overflow: ellipsis;
}

input[type="text"]:focus {
    border-color: initial;
    cursor: auto;
    transition-duration: 300ms;
}

Ответ 4

Попробуйте атрибут contenteditible. Однако это может потребовать больше работы, чтобы превратить его в пригодные для использования данные формы.

http://jsfiddle.net/michaelburtonray/C4bZ6/20/

<span class="parent" contenteditable>Click me</span>