Как селектором адресовать пустой необязательный для заполнения input или textarea?

[SilentImp]

Приятного дня.

Собственно сабж.

Как селектором адресовать пустой необязательный для заполнения input или textarea?

Мне нужно что бы представление пустых input и textarea отличалось от тех, в которые пользователь ввел текст и реализовать это хочется pure css.

Есть идеи?

[value=""] к сожалению не работает. Еще не разобрался почему.

:invalid требует required

[USF]

http://jsfiddle.net/ZmyDa/3/

у меня работает [value=""]

[SilentImp]

http://jsfiddle.net/ZmyDa/3/

у меня работает [value=""]

введите текст и посмотрите изменится ли рамка )

неприятно, да?

[USF]

ну оно и понятно, value то не изменился.

тогда, честно говоря, хз

[SilentImp]

Печалька. Похоже придется скриптово.

[SelenIT]

Единственный вариант, который приходит на ум — поиграть со стилизацией атрибута placeholder (если верить этой таблице, в FF и Сафарях для него можно нарисовать рамку и фон). Но это от отчаяния и чисто ради принципа, о кроссбраузерности речи не идет.

К сожалению, CSS позволяет различать только ключевые состояния (чекнуто/не чекнуто, активно/не активно, валидно/не валидно и т.п.). А все значения необязательного поля (включая пустоту) абсолютно равноправны — для логики оформления это одно и то же состояние. Различие между такими значениями — это уже логика поведения/функциональности, и в скрипте ей самое место (как раз для этого там предусмотрены два DOM-свойства value и defaultValue, а не один атрибут value). Возможно, я ретроград, но на мой взгляд делать это скриптом не только удобнее, но и логичнее.

[SilentImp]

Единственный вариант, который приходит на ум — поиграть со стилизацией атрибута placeholder

Не очень понимаю что дает placeholder который к тому же почти не стилизируется.

[SelenIT]

В тех браузерах, где стилизуется на уровне границ и фона — можно попробовать тупо перекрыть им незаполненный контрол (визуально). В остальных, увы, ничего не даст.

Единственное, что вообще пришло на ум по теме из мира (около)CSS.

[SilentImp]

В тех браузерах, где стилизуется на уровне границ и фона — можно попробовать тупо перекрыть им незаполненный контрол (визуально). В остальных, увы, ничего не даст.

Ничего не выйдет. Слишком слабый контроль над плейсхолдером.

[SelenIT]

Да, признаю, погорячился. Только в FF работает (где :placeholder — псевдокласс).

[lexxcode]

Я думаю так решить в данном случае будет проще хоть и на js http://jsfiddle.net/alexriz/fFeG4/5/

[SilentImp]

Да, js решение и сделал. Это не проблема. Хотелось найти purecss решение.

Жаль что это оказалось не возможно.

[SelenIT]

Upd: вроде случайно нашел вариант, дающий что-то похожее и в Хроме. До универсальности, конечно, далеко, но хоть что-то. А вот в Safari/Win (правда, не самом последнем, 5.1.5) как раз вообще ничего не вышло...