Могу ли я использовать псевдоэлемент: 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");
Чтобы добавить свой контент с помощью JavaScript. Это будет работать во всех браузерах.
Другие решения
: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>: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
}
Вы не можете поместить псевдоэлемент в элемент ввода, но можете вставить теневой элемент, как заполнитель!
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 }
Я нашел этот пост, так как у меня была та же проблема, это было решение, которое работало для меня. В отличие от замены значения ввода, просто удалите его и разместите за ним промежуток такого же размера, который может иметь :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>