Переключение стилей на ярлык (активный/фокус) для поля ввода только css

Интересно, существует ли способ css-only для переключения стилей на соответствующую метку в фокусе ввода. До сих пор я:

    $(document).on('focus active', 'input',function(){
        $('label[for='+$(this).attr('id')+']').addClass('active');
    });
    $(document).on('blur', 'input',function(){
        $('label[for='+$(this).attr('id')+']').removeClass('active');
    });

HTML:

    <div class="row">
     <label for="contact_form_mail">Email</label>
     <input id="contact_form_mail" name="contact_form_mail" type="email" placeholder="Your e-mail address...">
    </div>

И CSS:

.active{ color:red; }

Изменить: Я уверен в том, что "методы обхода" для детей и братьев и сестер "обходные пути", но перестановка чистой разметки для чистого стиля стилей кажется неправильной, поэтому, если есть еще один чистый css, этот ответ побед!

http://jsfiddle.net/fchWj/3/

Ответы

Ответ 1

Попробуйте следующим образом: - Поместите метку после ввода и поместите ее влево. И примените братьев и сестер.

Html

<div class="row">
    <input id="contact_form_mail" name="contact_form_mail" type="email" placeholder="Your e-mail address...">
    <label for="contact_form_mail">Email</label>
</div>

CSS

label {
    float:left;
}
input:focus + label {
    color:red;
}

Демо

Это взломать работу смежного селектора, поскольку он применяется только к следующему элементу, а не к предыдущему. ~ выберет всех смежных братьев и сестер после этого элемента. Поэтому, если у вас есть разные .row для каждого раздела входов, используйте +.

Ответ 2

Если вы хотите переключать элементы, то здесь вы идете

Демо

<div>
    <input type="text" />
    <label for="e_mail">E-Mail</label>
</div>

label {
    float: left;
    margin-right: 5px;
}

input[type=text]:focus + label {
    color: red;
}

Объяснение: здесь мы используем селектор +, поэтому, когда текстовое поле сфокусировано, мы выбираем тег label и применяем цвет red

Примечание. Не забудьте очистить поплавки;)

Ответ 3

Существует, но только если вы поместите метку после ввода.

<input name="field" type="text" />
<label for="field">Label Here</label>

input:focus + label{
    color: red;
}

Теперь, если вы хотите, чтобы метка была помещена перед ней, вам нужно сделать некоторый стиль css с абсолютной позицией, чтобы поместить метку перед полем ввода, а затем добавить некоторый запас слева на вкладке, чтобы переместить его вправо.

<div>
    <input name="field" type="text" />
    <label for="field">Label Here</label>
</div>

div{
   position: relative;
}
input{
   margin-left: 40px;
}
label{
   position:absolute;
   left:0;
}

Ответ 4

Сначала мы можем использовать селектор, который сразу же соответствует метке, за которой следует тег ввода (input: focus + label). Но по-прежнему существует проблема, что метка следует за фактическим полем ввода. Если вы хотите, чтобы он находился над текстовым вводом, нам нужно переключить позиции элементов управления. Это можно сделать с помощью псевдо-таблицы CSS.

<div class="pseudo-table">
   <input id="yourname" name="yourname" type="text" placeholder="Name...">
   <label for="yourname">Name</label>
</div>

Стиль для искусственной таблицы...

.pseudo-table { display: table;  }

С помощью этого на месте мы могли бы преобразовать метку, например. к группе заголовка таблицы:

label { display: table-header-group; }

и поле ввода в таблицу-строку-группу:

input { display: table-row-group; }

В сочетании с нашим последующим селектором мы закончили и выглядим правильно:

input:focus + label {
    color:red;
    font-weight: bold;
}

Для демонстрации см. это Fiddle

НТН

Ответ 5

Селектор не соответствует предыдущему элементу... Это соответствует метке, за которой следует входной тег.

input:focus + label {
    color: red;
}

Ответ 6

Это возможно только с помощью CSS, без переключения порядка ярлыка и ввода. Вы можете использовать псевдо-класс :focus-within CSS в родительском элементе, который применяется к элементам, у которого есть дочерний элемент с фокусом.

В вашем примере вы можете использовать следующее:

.row:focus-within label {
    color: red;
}

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