html - работает - псевдоэлемент у input




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

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

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

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

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

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

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

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

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

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


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

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

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

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

<input type="checkbox" />

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

<input type="radio" />

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


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


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


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

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


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

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


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

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>


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

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

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

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

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

API docs на. После

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


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


Резюме

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






css-content