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

:before и :after рендеринг внутри контейнера

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

---

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

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

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

рабочее решение в чистом 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.

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

согласно a Примечание в спецификации 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% страниц, использующих его, что составляет 20x наш Макс порог удаления.

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

s, а не "своего рода-замененные" элементы.

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

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

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 и: after, скорее всего, вы пытаетесь имитируйте эффекты других span, div или даже элементов в вашем стеке CSS.

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

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

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

$(yourInput).parent().addClass("error-form-field");