Стиль пустого текстового поля - решение только для CSS

Обновление — 24 марта 2016 г.

Я хотел обобщить опасения, но похоже, что это было понято конкретно, мой плохой. Этот ответ является 100% решением примера, который я использовал ранее.

введите здесь описание изображения

Обратитесь к этому CodePen.

Итак, идея Стиль пустого текстового поля заключалась в следующем.

textbox:empty ~ label {
 // position it as floating label
}

Похоже, сейчас это невозможно в CSS, возможно, в будущем.

Спасибо всем за вашу помощь.

Обновление – 23 марта 2016 г.

Этот ответ близок. Но использовать :invalid нельзя, так как это делает поле обязательным с атрибутом required=true.

стиль пустого и непустого состояния

Пожалуйста, обратитесь к этому CodePen для получения желаемого поведения с javascript. Демонстрация предназначена для объясняя, как это должно вести себя, использование javascript не является предполагаемым поведением. Кроме того, цвет используется только для контраста и не имеет ничего общего с проверкой

Есть ли способ задать стиль пустому текстовому полю только с помощью CSS?

Я попробовал :empty pseudo-class, к сожалению, textbox всегда определяется как пустой; так как у него нет детей или текстового узла. Если быть точным, textbox — это самозакрывающийся тег.

Псевдокласс :empty представляет любой элемент, у которого вообще нет дочерних элементов. Учитываются только узлы элементов и текст (включая пробелы).

Любой указатель будет полезен.


html css is-empty
person sarbbottam    schedule 24.03.2016    source источник
comment
Вы пробовали играть с активом и фокусом?   -  person Matthew    schedule 24.03.2016
comment
Атрибут focus близок, но не совсем то, что вам нужно ---› w3schools.com/cssref/tryit.asp?filename=trycss_sel_focus   -  person Arif Burhan    schedule 24.03.2016
comment
@ Мэтью, я не думаю, что active и focus говорят вам, пусто поле или нет.   -  person sarbbottam    schedule 24.03.2016
comment
Я не верю, что в CSS есть какой-либо способ определить, пусто поле ввода или нет, но вы можете невероятно приблизиться к этому с активным и сфокусированным. Вот аналогичный вопрос в любом случае stackoverflow.com/questions/16952526/   -  person Matthew    schedule 24.03.2016
comment
jsfiddle.net/en3Lxtsn действительно ближе всего к чистому CSS.   -  person Matthew    schedule 24.03.2016

Ответы (3)


arrow_upward
4
arrow_downward

Этого можно добиться, используя :invalid и установив input на required="true".

input { 
  padding: 10px;
  background-color:red; 
}
input:invalid {
  background-color:lightblue;
}
<input id="in1" required="true">

MDN :invalid< /а>

person Gerard Sexton    schedule 24.03.2016
comment
Я думал о :invalid, но тогда вы вынуждены использовать этот ввод — неплохо, если это поле должно иметь значение, но что, если оно на самом деле не требуется? Я думаю, это единственный способ. - person Matthew; 24.03.2016
comment
@Matthew Я думаю, что обязательные атрибуты применяются в javascript, поэтому, если он еще не использует требуемую семантику, он может просто продолжать их игнорировать. - person Gerard Sexton; 24.03.2016
comment
@GerardSexton Спасибо, я думал об этом, единственная проблема в том, что он не масштабируется с необязательными полями, форму нельзя отправить без заполнения соответствующих полей. - person sarbbottam; 24.03.2016
comment
@sarbbottam Нет проблем. Итак, вы решили использовать Javascript? - person Gerard Sexton; 24.03.2016
comment
@GerardSexton, возможно, просто откажется от плана, не хочет полагаться на javascript. - person sarbbottam; 24.03.2016

arrow_upward
0
arrow_downward

Можно использовать псевдоэлемент ::placeholder, например: http://codepen.io/thierry/pen/oxWMwy

person Thierry Koblentz    schedule 24.03.2016
comment
круто, изучил этот placeholder трюк, ваше решение идеально подходит для примера, который я опубликовал. Но на самом деле намерение было другим, я обновил пост. Спасибо! - person sarbbottam; 25.03.2016

arrow_upward
0
arrow_downward

Невозможно иметь решение только css (на данный момент) для обновленного поста.

введите здесь описание изображения

person sarbbottam    schedule 25.04.2016