Для двух классов focus, как сделать?

Question

[Антон Вебсайтовский]

Здравствуйте, сделал блок в котором input, у блока есть border: 1px solid #F2F2F2; при наведении на импут и если оставляешь там пунктир, то 1px solid #F2F2F2; должен меняться на border: 1px solid #77BB66;. вообще м пытаюсь сделать если нажал писать в input то что бы основной блок выделялся и менялся цвет бордера, что бы не импут выделялся, а весь блок.

Я пробовал такой вариант.

.addcomment input.focus .addformcomment {
border: 1px solid #77BB66;
}

не срабатывает.

стиль блока в котором input

.addformcomment{
margin-top: 20px;
margin-bottom: 20px;
display: inline-block;
float: left;
width: 312px;
height: 40px;
line-height: 40px;
border: 1px solid #F2F2F2;
}

сам стиль для input

.addcomment input{
height: 40px;
line-height: 40px;
width: 141px;
background-color: #ffffff;
padding-left: 15px;
padding-right: 15px;
display: inline-block;
border: none;
}

.addcomment input:hover{
background-color: #ffffff;
-webkit-box-shadow: inset 0px 2px 5px 0px rgba(50, 50, 50, 0.15);
-moz-box-shadow:    inset 0px 2px 5px 0px rgba(50, 50, 50, 0.15);
box-shadow:         inset 0px 2px 5px 0px rgba(50, 50, 50, 0.15);
}
.addcomment input:focus {
background-color: #ffffff;
-webkit-box-shadow: inset 0px 2px 5px 0px rgba(50, 50, 50, 0.15);
-moz-box-shadow:    inset 0px 2px 5px 0px rgba(50, 50, 50, 0.15);
box-shadow:         inset 0px 2px 5px 0px rgba(50, 50, 50, 0.15);
}

Когда наводишь на импут то весь блок выделяется, а когда в импут оставляешь пунктир что бы писать, то фокус не срабатывает выделения, а хотелось бы что бы зеленая рамка у всего блока оставалась.

Answer 1

[Дмитрий Фоминых]

https://jsfiddle.net/77zz4jvx/4/

Comments

[Антон Вебсайтовский]

Не такой метод не работает ! он работает как у вас сделано, а у меня для импута свои стили ! и для формы, а у вас пусто просто бордер.

[Дмитрий Фоминых]

Антон Вебсайтовский: что мешает прикрутить свои стили?

[Антон Вебсайтовский]

Дмитрий Фоминых: я делал и не работало :) все же просто, поменять стили и все. но не работало.

[Антон Вебсайтовский]

вот я делал https://jsfiddle.net/4psom3vj/

[Дмитрий Фоминых]

Вы не правильно селектор указали и забыли подключить jQuery
https://jsfiddle.net/4psom3vj/2/

[Антон Вебсайтовский]

а теперь понял, а я туда класс вписал ))), теперь все работает, спасибо.

[Дмитрий Фоминых]

Антон Вебсайтовский: Не за что, не забудьте пометить ответ, как решение, чтобы другие люди зря время не тратили)

Answer 2

[Сергей Иванов]

Css не работает вверх. только вниз.
То есть вы можете исxодя из состояния родителя назначать только дочерним, но не наоборот. Для обратного используйте js

И оставляйте пожалуйста свой код на https://jsfiddle.net/ . крайне сложно анализировать такое представление информации.

Comments

[Антон Вебсайтовский]

Что значит вверх и низ? я вас не совсем понял, я делал hover для двух классов сразу что бы задействовались ! и у меня работает, а вот с focus не делал.

[Сергей Иванов]

Антон Вебсайтовский: Киньте код куда я показал. Люди ответят быстрее и с большим удовольствием. Пока что задача сложна для понимания.

[Антон Вебсайтовский]

Стили скинул.

Вот код.
- для всех импутов в форме подгрузка стиля

один импут оставил в коде, весь список не стал скидывать, для начала для одного сделать бы.

[Сергей Иванов]

Антон Вебсайтовский: Не вижу.

[Антон Вебсайтовский]

Вот сделал https://jsfiddle.net/4psom3vj/