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

Я пытаюсь использовать :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, потому что он создается сторонним элементом управления.

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

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

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

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

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

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

Чтобы добавить свой контент с помощью JavaScript. Это будет работать во всех браузерах.

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

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

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

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

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

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

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

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

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

<input type="checkbox" />

работает нормально, так же, как

<input type="radio" />

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

Вот еще один подход (при условии, что у вас есть контроль над 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>.

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

Это не относится к самозакрывающимся элементам.

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

Я использовал 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

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

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

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

ОБНОВЛЕНИЕ : приведенный выше код работает только с препроцессором CSS (SASS, LESS ...), без использования препроцессоров:

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

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

Рабочее решение в чистом 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's maybe something after a input-text
  Does'nt matter what it is (*), I use it.
  -->
<span></span>

(*) Ограниченное решение, хотя:

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

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

Я нашел этот пост, так как у меня была та же проблема, это было решение, которое работало для меня. В отличие от замены значения ввода, просто удалите его и разместите за ним промежуток такого же размера, к нему можно :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>

Самое большое недоразумение здесь - это значение слов beforeи after. Они относятся не к самому элементу, а к содержимому элемента. Так element:beforeже и до содержимого, и element:afterпосле содержимого, но оба они все еще находятся внутри исходного элемента.

inputЭлемент не имеет содержимого в представлении CSS, и так не имеет :beforeили :afterсодержание псевдо. Это верно для многих других пустых или замененных элементов.

За пределами этого элемента нет псевдоэлемента.

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

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

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

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

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

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

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

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

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

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>

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

Рабочая скрипка

Знак доллара внутри входа в виде псевдоэлемента: 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;
}

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

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

ОДНАКО HTML 5 представил элемент button, который является контейнером и ведет себя как элемент input [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>

Резюме

Не работает <input type="button">, но работает нормально <input type="checkbox">.

Скрипка : 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;
}

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

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

.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, который принимает padding и: after. Первый родитель должен быть относительным, а второй div должен быть абсолютным, чтобы вы могли установить позицию после.

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

<div>
<input type="text"></input>text can be entered here</div>