В любом случае, чтобы ярлык отвечал: focus CSS - PullRequest
Новая
       16

В любом случае, чтобы ярлык отвечал: focus CSS

14 голосов
/ 12 мая 2011

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

#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;
}

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

Любые идеи,

Marvelous

Ответы [ 2 ]

25 голосов
/ 12 мая 2011

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

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

#header .search input:focus + label
7 голосов
/ 09 февраля 2017

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

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

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

, вы можете ограничить метку 'focussed' просто: 

label:focus-within{}

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

div.input-wrapper:focus-within{}

Волшебный.Но не для использования сегодня: (

Во-вторых, если вы уже используете механизм выбора 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");
  });
});

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

...