Создание контента CSS до или после ввода элементов

html css

185502 просмотра

5 ответа

В 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 -->

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

Автор: Guilherme Vieira Источник Размещён: 12.11.2019 09:08

Ответы (5)


294 плюса

Решение

С помощью :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>кажется, особый).

Автор: Felix Kling Размещён: 01.01.2011 05:37

50 плюса

Это происходит не из-за того, что у 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 псевдоэлементов

Автор: SW4 Размещён: 30.12.2014 03:25

15 плюса

Примерно так работает:

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;
}
<input id="input" type="number" required />
<label for="input"></label>

Затем добавьте несколько поплавков или позиционирование, чтобы заказать вещи.

Код в JSBin .

Автор: Brook Jordan Размещён: 30.04.2014 08:27

3 плюса

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

Автор: cockpitseeker Размещён: 19.11.2012 01:06

0 плюса

Используйте теги 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>
Автор: Roman Bondar Размещён: 18.10.2013 03:20
Вопросы из категории :
32x32