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

Ответ 1

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

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

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

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

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

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

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

Ответ 2

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

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

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

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

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

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

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

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

Ответ 3

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

<input type="checkbox" />

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

<input type="radio" />

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

Ответ 4

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

Ответ 5

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

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

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

Ответ 6

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

Ответ 7

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

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 }

Ответ 8

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

Ответ 9

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

Ответ 10

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

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

Ответ 11

Как объяснили другие, 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, а не   «Замеченные» элементы.

Ответ 12

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

Ответ 13

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

Ответ 14

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

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>

Ответ 15

Если вы пытаетесь создать элемент ввода с помощью: 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>

Ответ 16

Резюме

Он не работает с <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;
}

Ответ 17

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

Ответ 18

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

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

Ответ 19

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

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