Формы: input + label в качестве заполнителя

Question

Я работаю над адаптивными заполнителями для формы. Вдохновленный этим http://blog.circleci.com/adaptive-placeholders Я использую <label> и придаю ему стиль, чтобы он выглядел как обычный заполнитель.

Как это:

input[type="text"][required] + label[placeholder]:before { 
       content: attr(placeholder); 
       display: inline-block; 
       margin: 0 10px; 
       padding: 0; 
       color: #999999; 
       white-space: nowrap; 
} 

Обычно я предназначаться заполнитель для укладки (например, придав ему класс ошибок валидации.), Как это:

.error::-webkit-input-placeholder { 
       color: #000; 
      } 

Моя первая мысль была бы следующее, чтобы установить класс .error, но он не работает:

.error::-webkit-input[type="text"][required] + label[placeholder]:before { 
       color: #000; 
      } 

Любые предложения по правильному применению класс CSS для метода, который использовался выше?

JSFiddle: https://jsfiddle.net/34ye51t5/

Спасибо.

Answer 1

Похоже, вы сталкиваетесь с проблемами специфики. Добавление следующих CSS-работ, но я бы подумал о повторной факторизации кода, чтобы избежать этих проблем.

input[type="text"].error + label[data-placeholder]:before{ 
    color: white; 
} 

Прежде всего placeholder является not a valid attrinbute for a label - это только для входов. Вы можете изменить это атрибут данных, но я не вижу смысла в этом, вы можете также просто использовать метку следующим образом (альт также не является допустимым атрибутом

<label for="last_name">Last name</label> 

Вы будете тогда необходимо отрегулировать позиционирование и т. д. этой метки.

Я также хотел бы добавить класс в оболочку для комбинации меток/ввода для лучшего контроля и избежать указанных проблем. Я сделал быстрый пример, используя BEM именования, используя sass в качестве препроцессора. Это не предназначено для репликации поведения вашего кода, но должно служить хорошей отправной точкой.

http://codepen.io/jaycrisp/pen/pgQbWd

Затем вы можете добавить класс ошибок в качестве «модификатора» к каждому элементу, чтобы вы могли стилизовать их независимо, например. .fancy__input--error и не полагаться на использование таких вещей, как селектор +.