Создание содержимого CSS до или после элементов "ввода"

В Firefox 3 и Google Chrome 8.0 работает как обычно:

<style type="text/css">
    span:before { content: 'span: '; }
</style>

<span>Test</span> <!-- produces: "span: Test" -->

Но это не происходит, когда элемент <input>:

<style type="text/css">
    input:before { content: 'input: '; }
</style>

<input type="text"></input> <!-- produces only the textbox; the generated content
                                 is nowhere to be seen in both FF3 and Chrome 8 -->

Почему он не работает, как я ожидал?

Ответ 1

С :before и :after вы указываете, какой контент должен быть вставлен до (или после) содержимого внутри этого элемента. Элементы input не имеют содержимого.

например. если вы пишете <input type="text">Test</input> (это неправильно), браузер исправит это и поместит текст после элемента ввода.

Единственное, что вы можете сделать, это обернуть каждый элемент ввода в span или div и применить к ним CSS.

См. примеры в спецификация:

Например, следующий фрагмент документа и таблица стилей:
<h2> Header </h2>               h2 { display: run-in; }
<p> Text </p>                   p:before { display: block; content: 'Some'; }
... будет отображаться точно так же, как следующий фрагмент документа и таблица стилей:
<h2> Header </h2>            h2 { display: run-in; }
<p><span>Some</span> Text </p>  span { display: block }

Это по той же причине, почему она не работает для <br>, <img> и т.д. (<textarea> кажется особенным).

Ответ 2

Это связано не с тегами input, которые не имеют какого-либо контента, но что их содержимое выходит за рамки CSS.

input Элементы представляют собой специальный тип replaced elements, они не поддерживают селектора :pseudo например :before и :after.

В CSS замененный элемент представляет собой элемент , представление которого вне рамки CSS. Это вид внешних объектов, представление не зависит от CSS. Типичные заменяемые элементы <img>, <object>, <video> или образуют такие элементы, как <textarea>и <input>. Некоторые элементы, такие как <audio> или <canvas>, заменяются элементов только в конкретных случаях. Объекты, вставленные с помощью CSS свойства содержимого являются анонимными замененными элементами.

Обратите внимание, что это даже упоминается в в спецификации:

Эта спецификация не полностью определяет взаимодействие :beforeи :after с замененными элементами (такими как IMG в HTML).

И более явно:

Замененные элементы не имеют ::before и ::afterпсевдо-элементы

Ответ 3

Что-то вроде этого работает:

<style>
  input + label:after {
    content: 'click my input';
    color: blue;
  }

  input:focus + label:after {
    content: 'not valid yet';
    color: blue;
  }

  input:valid + label:after {
    content: 'looks good';
    color: red;
  }
</style>

<input id="input" type="number" required />
<label for="input"></label>

Затем добавьте некоторые поплавки или позиционирование для заказа материала. Здесь JSBin:

http://jsbin.com/roxem/2/edit

Ответ 4

fyi <form> также поддерживает :before/:after, может быть полезно, если вы обернете его элементом <input>... (тоже получило проблему с дизайном)

Ответ 5

Использовать теги label, а наш метод для =, привязан к ввода. Если следовать правилам формы и избегать путаницы с тегами, используйте следующее:

<style type="text/css">
    label.lab:before { content: 'input: '; }
</style>

или сравнить (короткий код):

<style type="text/css">
    div label { content: 'input: '; color: red; }
</style>

форма....

<label class="lab" for="single"></label><input name="n" id="single" ...><label for="single"> - simle</label>

или сравнить (короткий код):

<div><label></label><input name="n" ...></div>