Как сохранить метку активной, когда поле ввода внутри метки активно?

Question

У меня есть метка вроде <label>name:<input></label> и css вроде label:active{/*properties*/} Я бы хотел, чтобы свойства применялись к name внутри <label>, когда я нажимаю <input>, он применяется, но теряет фокус на<input> вскоре после того, как я нажму на него.

вот пример: http://jsfiddle.net/GuCk4/2/

Answer 1

Если я понимаю ваш вопрос, вы могли бы просто сделать это ... без изменения любого HTML.

label, input, input:focus{
    font-weight: bold;
}

Пример: http://jsfiddle.net/jasongennaro/GuCk4/4/

Кстати: вы не* действительно нужно input:focus здесь ... по крайней мере, в моих тестах на Chrome.Вам может понадобиться это для других браузеров.

РЕДАКТИРОВАТЬ

Хорошо, после комментария @ Мохсена я перечитал вопрос.

Что выхочу это родительский селектор в css.Этого не существует.Поскольку css опирается на каскад, он применяет стили к DOM, а не к нему.

Итак, единственный способ сделать то, что вы хотите, - переписать ваш HTML согласно ответу @ Mohsen или использовать какой-нибудь jQuery,вот так

$('input').focus(function(){
    $(this).parent().css('font-weight','bold');
});

$('input').blur(function(){
    $(this).parent().css('font-weight','normal');
});

Пример 2: http://jsfiddle.net/jasongennaro/GuCk4/5/

Answer 2

Для тех, кто использует jQuery 1.7+, ниже предлагается jQuery для переключения «active» class на label, обернутого вокруг <input type="checkbox">.

$("body").on(
  "click",
  "label input[type=checkbox]",
  function(){
    $(this).parent("label").toggleClass("active");
  }
);

Демо: http://jsbin.com/iHaJeCe/3

Answer 3

этикетка {дисплей: блок} метка: активная, этикетка: парить, метка: фокус {начертание шрифта: 700}

работает так, как вы хотите.

@ steveax правильный, не ставьте метку после ввода, если это не флажок