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




работает несколько (17)

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


Answers

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


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

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 }

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


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

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

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

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

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

API docs на. После

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


Вот еще один подход (при условии, что у вас есть контроль над HTML): добавьте пустой <span></span> сразу после ввода и input.mystyle + span:after в 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> .


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

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

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

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

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

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


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

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

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


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

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

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

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

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

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

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

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


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

<input type="checkbox" />

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

<input type="radio" />

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


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

.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 должен быть абсолютным, чтобы вы могли установить положение после.


Резюме

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

Вместо изображения следует использовать фон.

.pdflink:after {
  content: "";
  background-image:url(your-image-url.png);
  background-size: 100% 100%;
  display: inline-block;

  /*size of your image*/
  height: 25px;
  width:25px;

  /*if you want to change the position you can use margins or:*/
  position:relative;
  top:5px;

}




html css pseudo-element css-content