Поменять border родителя при фокусе дочернего input

[ekkl]

Нужно помять border родителя при фокусе дочернего элемента

http://jsbin.com/pixut/10/edit?css,output

Пробовал так, не получается.

Без js это возможно?

form span {  display: inline-block;  font-size: 18px;  line-height: 1;  background-color: #fff;  padding: 6px 2px 6px 36px;  margin: 20px;  border: 1px solid #666;}form input {  border: none;  width: 360px;  padding: 0;  margin-right: 0px;  font-size: 24px;  color: #737373;  transition: color 0.2s, border-color 0.2s;  display: inline-block;}form input:focus {  color: black;}span<input:focus{border:1px solid blue;

[Aleksandr.L]

Нужно помять border родителя при фокусе дочернего элемента. Без js это возможно?

 

Сложно даже представить, как это можно сделать без JS.

[psywalker]

 

Нужно помять border родителя при фокусе дочернего элемента. Без js это возможно?

 

Сложно даже представить, как это можно сделать без JS.

 

Можно вот как-то так заморочиться, но имхо, я бы таке делал на JS. Там кода-то 5 секунд, а надёжность железнобетонная.

[ekkl]

psywalker, пожалуй, я прислушаюсь к вашему мнению и сделаю на js.

Zepto(function($){  $('input').on('focus', function(){    $(this).parent('span').addClass('focus');  });  $('input').on('blur', function(){    $(this).parent('span').removeClass('focus');  });});

Нельзя ли этот код сделать немного изящнее?

Edited January 10, 2015 by ekkl

[psywalker]

psywalker, пожалуй, я прислушаюсь к вашему мнению и сделаю на js.

Zepto(function($){  $('input').on('focus', function(){    $(this).parent('span').addClass('focus');  });  $('input').on('blur', function(){    $(this).parent('span').removeClass('focus');  });});

Нельзя ли этот код сделать немного изящнее?

Не знаю, может как-то так попробовать на чистом жс. Но, имхо, ничего страшного и раздутого в этом и вашем коде нет.

[ekkl]

Спасибо. Но так как по-любому буду юзать или Зепто или ЖКвери то думаю на чистом смыла нет.

[psywalker]

Спасибо. Но так как по-любому буду юзать или Зепто или ЖКвери то думаю на чистом смыла нет.

Поддерживаю!

[1thsnd]

psywalker, пожалуй, я прислушаюсь к вашему мнению и сделаю на js.

Zepto(function($){  $('input').on('focus', function(){    $(this).parent('span').addClass('focus');  });  $('input').on('blur', function(){    $(this).parent('span').removeClass('focus');  });});

Нельзя ли этот код сделать немного изящнее?

 

Ну если очень хочется, то можно.

Zepto(function($){  $('input').on('focus', function(){    $(this).parent('span').toggleClass('focus');  });});

[ekkl]

1thsnd, а вы пробовали то, что советуете?

При первом фокусе рамочка появляется, при втором — исчезает.

[psywalker]

Кстати, единственное, чтобы я подправил, это название класса "focus", ибо он не несёт в себе никакой понятной информации. Что скрывается за этим классом, мне лично непонятно. Я бы пошёл в сторону того, что именно делает этот класс, что он изменяет и т.д. + если вдруг на сайте появится ещё один элемент, который должен будет как-то видоизменяться при фокусе, то тогда будет совсем нехорошо. Не бойтесь длины и количества символов класса, главное качество