it-swarm.com.ru

переключение стилей на метке (активный/фокус) для поля ввода только с 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; }

Edit: Я, конечно, знаю о «обходных путях» дочерних и родственных селекторов, но перестановка чистой разметки ради чистого стиля кажется неправильной, поэтому, если есть другой способ чистого CSS, этот ответ выигрывает!

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

13
worenga

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

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 для каждого раздела входов, используйте +.

16
PSL

Если вы готовы поменять элементы, чем здесь вы идете

Демо

<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

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

14
Mr. Alien

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

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

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

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

4
Johnny Fekete

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

<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;
}
3
Ali Bassam

Сначала мы можем использовать селектор, который соответствует метке, за которой сразу следует тег ввода (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;  }

Имея это в виду, мы могли бы преобразовать метку, например, в table-header-group:

label { display: table-header-group; }

и поле ввода для table-row-group:

input { display: table-row-group; }

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

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

Для демонстрации, пожалуйста, смотрите это Fiddle

НТН

2
hennson

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

input:focus + label {
    color: red;
}
1
sjkm

Это даст вам метку поверх ввода, выделите метку во время фокусировки ввода.
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>

<code>
.row{
    display:flex;
    flex-direction:column-reverse;
    align-self:flex-start;
 }
 .row input:focus{
     border: 1px solid red;
  }
  .row input:focus+label{
     color:red;
  }
  </code>
0
Li Zhen Wu