Не срабатывает focus?

Question

[Дмитрий]

Здравствуйте.Есть такой инпут.
codepen.io/ddimonn8080/pen/PZKXML?editors=110
Всё замечательно работает, но есть одно но..при фокусе не срабатывает изменение бордера на блоке обёртке.Нужен кроссбраузерный вариант включая ИЕ6.Что скажете?

Answer 1

[#FFFFFF]

.inputInner .lupa:focus .inputWrapper {
	border: 1px solid black;
}

- такое никогда не сработает. По смыслу у вас получается, что .inputWrapper находится внутри .lupa, т.к. идет после через пробел.
Для подобных действий, наверно, понадобится js.

Answer 2

[Oblacko]

А он и не сработает. CSS умеет смотреть только вниз (потому что Cascade Style Sheets), а ты пытаешься повлиять на обертку элемента от состояния самого элемента. Тут js нужен.

Answer 3

[Дмитрий]

Надо - значит надо. Всем спасибо.
codepen.io/ddimonn8080/pen/PZKXML?editors=101

$(document).ready(function(){
	var foc = $('.lupa');
	
	var active = foc.parents('.inputWrapper');
	
	foc.on('focus',function(){
		active.css({'border' : '1px solid #222'});
	}).on('blur',function(){
		active.css({'border' : '1px solid #bdc3c7'})
	});
});