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

Question

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

Answer 1

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

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

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

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

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

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

Answer 2

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

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

Answer 3

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

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

Не существует псевдоэлемента, ссылающегося на вне элемента.

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

Answer 4

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

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>

Answer 5

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

Answer 6

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

Answer 7

Сводка

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

Answer 8

Если вы пытаетесь стилизовать элемент ввода с помощью: before и: after, есть вероятность, что вы пытаетесь имитировать эффекты других span, div или даже элементов в вашем стеке CSS. 1003 * Как указывает ответ Роберта Коритника,: 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>

Answer 9

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

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

Answer 10

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

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