Во всяком случае, чтобы на этикетке отвечали: focus CSS

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

#header .search label {
    background:url(http://www.golfbrowser.com/images/icons/search.png) left top no-repeat;
    padding-left:20px;
    height:20px;
    float:right;
}
#header .search label:focus {
    background:url(http://www.golfbrowser.com/images/icons/search-z.png) left top no-repeat;
    padding-left:20px;
    height:20px;
    float:right;
}
#header .search input {
    padding:0px;
    border:0px;
    width:140px;
    height:20px;
    float:left;
    padding-right:10px;
    background:url(http://www.golfbrowser.com/images/icons/searchbar.png) right top no-repeat;
}
#header .search input:focus {
    padding:0px;
    width:190px;
    height:20px;
    float:left;
    padding-right:10px;
    background:url(http://www.golfbrowser.com/images/icons/searchbar-z.png) right top no-repeat;
}

Ярлык содержит изображение и другую часть круглого угла, и он тоже должен менять цвет, чтобы поле выглядело правильно.

Любые идеи,

Замечательное

Ответы

Ответ 1

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

Возможно, вам придется перестроить свой HTML (и соответственно изменить свой CSS), чтобы вы могли выбрать input:focus, а затем соответствующую метку ввода. Например, если вы переместили свой ярлык после ввода и использовали следующий селектор CSS для своей метки, вы сможете выполнить то, что хотите.

#header .search input:focus + label

Ответ 2

Ответ BoltClock - это более семантический, легкий способ достижения этой функциональности. Однако не всегда возможно иметь определенную структуру HTML (особенно для облегчения такой незначительной функции, как это), и CSS не имеет возможности пройти иерархию HTML. Чтобы обойти это, вот две альтернативы. Первый скоро появится (CSS spec 4), а второй - наш старый Javascript. Javascript.

Сначала, CSS4 :focus-within псевдоселектор. Это делает именно то, что он говорит на олове (области действия, основанные на активном состоянии фокуса дочернего элемента). Подробнее о спецификации здесь. Предположим, что у вас есть структура HTML:

<div class="input-wrapper">
    <label for="elem">Label Text
      <input name="elem" id="elem" type="text" />
    </label>
</div>

вы можете сфокусировать ярлык "фокуссированный":

label:focus-within{}

тем же самым маркером, вы также можете указать родительский div:

div.input-wrapper:focus-within{}

Magical. Но не для использования сегодня: (

Во-вторых, если вы уже используете механизм выбора JS (например, jQuery, Sizzle и т.д.), вы также можете сделать что-то в соответствии с:

$('input').on("focus", function(){
  var input = $(this);
  // assuming label is the parent, i.e. <label><input /></label>
  var label = $(this).parent();
  label.addClass('focussed');
  input.on("blur", function(){
    label.removeClass('focussed');
    input.off("blur");
  });
});

Это untested, но суть того, что это достигается, - это использовать класс, а не псевдо-селектор :focus. Таким образом, вы можете добавить свои фокусные стили в label.focussed{}. Я добавил (и самостоятельно удалил) обработчик размытия, чтобы облегчить удаление класса.