Могу ли я использовать: перед или: после псевдоэлемента в поле ввода?

Я пытаюсь использовать псевдоэлемент :after CSS в поле input, но он не работает. Если я использую его с span, он работает нормально.

<style type="text/css">
.mystyle:after {content:url(smiley.gif);}
.mystyle {color:red;}
</style>

Это работает (ставит смайлик после «buu!» И до «еще немного»)

<span class="mystyle">buuu!</span>a some more

Это не работает - он только окрашивает someValue в красный цвет, но смайлик отсутствует.

<input class="mystyle" type="text" value="someValue">

Что я делаю неправильно? Должен ли я использовать другой псевдоселектор?

Примечание. Я не могу добавить span вокруг моего input, потому что он создается сторонним элементом управления.

544
06 апр. '10 в 22:28
источник поделиться
19 ответов

:after и :before не поддерживаются в Internet Explorer 7 и ниже, для любых элементов.

Он также не предназначен для использования на замененных элементах, таких как элементы формы (входы) и элементы изображения.

Другими словами, это невозможно с чистым CSS.

Однако, если вы используете jquery, вы можете использовать

$(".mystyle").after("add your smiley here");

документы API на .after

Чтобы добавить свой контент в javascript. Это будет работать во всех браузерах.

224
07 апр. '10 в 13:01
источник

Связанные вопросы


Похожие вопросы

:before и :after сделать внутри контейнера

и < input > Не может содержать другие элементы.


Псевдоэлементы могут быть определены (или, лучше сказать, только поддерживаются) на элементах контейнера. Поскольку способ, которым они визуализируются, внутри сам контейнер как дочерний элемент. input не может содержать другие элементы, поэтому они не поддерживаются. A button, с другой стороны, это также элемент формы, который поддерживает их, потому что это контейнер других подэлементов.

Если вы спросите меня, если какой-либо браузер делает отображает эти два псевдоэлемента на неконтейнерных элементах, это ошибка и нестандартное соответствие. Спецификация напрямую говорит о содержании элемента ...

Спецификация W3C

Если мы внимательно прочитаем спецификацию, это на самом деле Говорит, что они вставлены внутри содержащего элемент:

Авторы определяют стиль и расположение сгенерированного контента с помощью: before и: after псевдоэлементов. Как показывают их имена, псевдовые элементы: before и: after определяют местоположение содержимого до и после содержимого дерева документа элемента. Свойство «content» в сочетании с этими псевдоэлементами указывает, что вставляется.

См? дерево документа элемента . Насколько я понимаю, это означает внутри контейнер.

1111
11 янв. '11 в 20:18
источник

Как ни странно, он работает с некоторыми типами ввода. По крайней мере, в Chrome,

<input type="checkbox" />

работает отлично, так же, как

<input type="radio" />

Это просто type=text и некоторые другие, которые не работают.

55
24 дек. '12 в 12:56
источник

Вот еще один подход (предполагая, что у вас есть контроль над HTML): добавьте пустой <span></span> сразу после ввода и нажмите Что в CSS с использованием input.mystyle + span:after

.field_with_errors {
  display: inline;
  color: red;
}
.field_with_errors input+span:after {
  content: "*"
}
<div class="field_with_errors">Label:</div>
<div class="field_with_errors">
  <input type="text" /><span></span> 
</div>

Я использую этот подход в AngularJS, потому что он автоматически добавит классы .ng-invalid к элементам формы <input>, а к форме, но не к <label>.

32
13 июля '15 в 23:25
источник

:before и :after применяются внутри контейнера, что означает, что вы можете использовать его для элементов с конечным тегом.

Он не применяется для самозакрывающихся элементов.

С одной стороны, элементы, которые являются самозакрывающимися (например, img/hr/input), также известны как "Замещенные элементы", поскольку они заменяются соответствующим содержимым. "Внешние объекты" из-за отсутствия лучшего термина. Лучше читать здесь

28
13 янв. '15 в 15:25
источник

Я использовал background-image для создания красной точки для обязательных полей.

input[type="text"][required] {
  background-image: radial-gradient(red 15%, transparent 16%);
  background-size: 1em 1em;
  background-position: top right;
  background-repeat: no-repeat
}

Просмотр на Codepen

23
17 июня '14 в 14:40
источник

Вы не можете поместить псевдоэлемент во входной элемент, но можете поместить в теневой элемент, как заполнитель!

input[type="text"] {   
  &::-webkit-input-placeholder {
    &:before {
      // your code
    }
  }
}

Чтобы заставить его работать в других браузерах, используйте :-moz-placeholder, ::-moz-placeholder и :-ms-input-placeholder в разных селекторах. Невозможно сгруппировать селекторы, потому что если браузер не распознает селектор, он отменяет весь оператор.

UPDATE: приведенный выше код работает только с предварительным процессором CSS (SASS, LESS ...), без использования предварительных процессоров:

input[type="text"]::-webkit-input-placeholder:before { // your code }
21
14 нояб. '14 в 0:10
источник

Я нашел этот пост, поскольку у меня была такая же проблема, это было решение, которое сработало для меня. В отличие от замены значения ввода просто удалите его и полностью поместите за ним промежуток, который имеет тот же размер, диапазон может иметь класс :before, который применяется к нему с помощью шрифта значка по вашему выбору.

<style type="text/css">

form {position: relative; }
.mystyle:before {content:url(smiley.gif); width: 30px; height: 30px; position: absolute; }
.mystyle {color:red; width: 30px; height: 30px; z-index: 1; position: absolute; }
</style>

<form>
<input class="mystyle" type="text" value=""><span class="mystyle"></span>
</form>
13
02 нояб. '12 в 13:38
источник

Псевдоэлементы типа :after :before - только для элементов контейнера. Элементы, начинающиеся и закрывающиеся в одном месте, такие как <input/>, <img> т.д., Не являются элементами контейнера и, следовательно, псевдоэлементы не поддерживаются. Как только вы примените псевдоэлемент к элементу контейнера, например <div> и если вы проверите код (см. Изображение), вы поймете, что я имею в виду. Фактически псевдоэлемент создается внутри элемента контейнера. Это невозможно в случае <input> или <img>

enter image description here

5
04 дек. '17 в 14:20
источник

Как объяснили другие, input s являются незаменимыми элементами void, поэтому большинство браузеров не позволят вам генерировать в них ::before и ::after псевдоэлементы.

Однако рабочая группа CSS рассматривает возможность явного разрешения ::before и ::after в случае, если input имеет appearance: none.

Из https://lists.w3.org/Archives /Public/www-style/2016Mar/0190.html,

Safari и Chrome позволяют использовать псевдоэлементы в своих входных формах.   Другие браузеры этого не делают. Мы изучили это, но   Use-counter записывает ~ .07% страниц, используя это, что составляет 20x наш максимум   Порог удаления.

     

Фактическое указание псевдоэлементов на входы потребует указания   Внутренняя структура ресурсов хотя бы несколько, что у нас нет   (И я не уверен, что мы * можем * сделать). Но Борис   Предположил, в одном из bugthreads, позволяя ему появиться: none   Входы - в основном просто превращая их в < div > s, а не   «Замеченные» элементы.

4
18 марта '16 в 1:47
источник

Рабочее решение в чистом CSS:

Трюк состоит в том, чтобы предположить, что после текстового поля есть элемент dom.

/*
 * The trick is here:
 * this selector says "take the first dom element after
 * the input text (+) and set its before content to the
 * value (:before).
 */
input#myTextField + *:before {
  content: "👍";
} 
<input id="myTextField" class="mystyle" type="text" value="someValue" />
<!--
  There maybe something after a input-text
  Does'nt matter what it is (*), I use it.
  -->
<span></span>

(*) Ограниченное решение:

  • Вы должны надеяться, что существует следующий элемент dom,
  • Вы должны надеяться, что никакое другое поле ввода не будет следовать за вашим полем ввода.

Но в большинстве случаев мы знаем наш код, поэтому это решение кажется эффективным и 100% CSS и 0% jQuery.

4
29 окт. '17 в 11:45
источник

В соответствии с примечанием в спецификации CSS 2.1 спецификация «Не полностью определяет взаимодействие: before и: after с замененными элементами (такими как IMG в HTML). Это будет более подробно описано в будущей спецификации. Хотя элемент input уже не является замененным элементом, базовая ситуация не изменилась: эффект :before и :after на нем в неуказанном состоянии и, как правило, Никакого эффекта.

Решение состоит в том, чтобы найти другой подход к проблеме, которую вы пытаетесь решить таким образом. Помещение сгенерированного контента в элемент управления ввода текста будет очень вводить в заблуждение: для пользователя он будет являться частью начального значения в элементе управления, но он не может быть изменен - ​​таким образом, он будет казаться чем-то вынужденным в начале Но все же он не будет представлен как часть данных формы.

4
14 окт. '13 в 14:00
источник

У вас должна быть какая-то обертка вокруг ввода, чтобы использовать псевдо или элемент до или после. Вот скрипка, которая имеет перед собой на обертке div ввода, а затем помещает ее перед входом - или, по крайней мере, выглядит так. Очевидно, что это - работа, но эффективная в щепотке и позволяет себя реагировать. Вы можете легко сделать это после, если вам нужно добавить другой контент.

Рабочий скрипт

Знак доллара внутри ввода как псевдоэлемент: http://jsfiddle.net/kapunahele/ose4r8uj/1 /

HTML:

<div class="test">
    <input type="text"></input>
</div>

CSS:

input {
    margin: 3em;
    padding-left: 2em;
    padding-top: 1em;
    padding-bottom: 1em;
    width:20%; 
}


.test {
    position: relative;
    background-color: #dedede;
    display: inline;
}

.test:before {
    content: '$';
    position: absolute;
    top: 0;
    left: 40px;
    z-index: 1;
}
3
19 дек. '14 в 18:25
источник

попробуйте следующее:

label[for="userName"] {
  position: relative;
}

label[for="userName"]::after {
  content: '[after]';
  width: 22px;
  height: 22px;
  display: inline-block;
  position: absolute;
  right: -30px;
}
<label for="userName">
	Name: 
	<input type="text" name="userName" id="userName">
	</label>

2
06 нояб. '16 в 13:04
источник

Резюме

Он не работает с <input type="button">, но он отлично работает с <input type="checkbox">.

Fiddle: http://jsfiddle.net/gb2wY/50/

HTML

<p class="submit">
    <input id="submit-button" type="submit" value="Post">
    <br><br>
    <input id="submit-cb" type="checkbox" checked>
</p>

CSS

#submit-button::before,
#submit-cb::before {
    content: ' ';
    background: transparent;
    border: 3px solid crimson;
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: -3px -3px;
}
1
10 нояб. '16 в 11:56
источник

:before и :after работает только для узлов, которые могут иметь дочерние узлы, поскольку они вставляют новый узел в качестве первого или последнего узла.

1
10 февр. '17 в 16:42
источник

Если вы пытаетесь создать элемент ввода с помощью: before и: after, вероятность того, что вы пытаетесь имитировать эффекты другого span, div или даже элементов в вашем стеке CSS.

Как указывает ответ Роберта Коритника: before и: after можно применять только к элементам контейнера, а элементы ввода не являются контейнерами.

ОДНАКО, HTML 5 представил элемент кнопки, который является контейнером и ведет себя как элемент ввода [type = "submit | reset]].

    <style>
    .happy:after { content:url(smiley.gif); }
    </style>

    <form>
    <!-- won't work -->
    <input class="happy" type="submit" value="Submit" />

    <!-- works -->
    <button class="happy">Submit</button>
    </form>
1
31 дек. '16 в 4:46
источник

Я обнаружил, что вы можете сделать это следующим образом:

.submit .btn input
{
   padding:11px 28px 12px 14px;
   background:#004990;
   border:none;
    color:#fff;
}

 .submit .btn
 {
     border:none;
     color:#fff;
     font-family: 'Open Sans', sans-serif;
     font-size:1em;
     min-width:96px;
     display:inline-block;
     position:relative;
 }

.submit .btn:after
{
    content:">";
    width:6px;
    height:17px;
    position:absolute;
    right:36px;
    color:#fff;
    top:7px;
}
<div class="submit">
  <div class="btn">
     <input value="Send" type="submit" />
  </div>
</div>

У вас должен быть родитель div, который принимает отступы и: после. Первый родитель должен быть относительным, а второй div должен быть абсолютным, чтобы вы могли установить положение после.

0
02 дек. '14 в 17:28
источник

Вы можете использовать после или перед элементом в родительском блоке с помощью jQuery. Например:

$(yourInput).parent().addClass("error-form-field");
0
29 окт. '15 в 0:04
источник

Посмотрите другие вопросы по меткам или Задайте вопрос