Можно ли использовать селектор :: before с ‹textarea›?

Я экспериментирую с некоторыми стилями на <textarea>s, и я пробовал делать кое-что с ::before и ::after селекторами, и мне ничего не удалось заставить их работать. Возникает вопрос: возможно ли это? Я знаю, что окружающие формы CSS непонятны, но похоже, что это должно сработать.


forms html css css-selectors pseudo-element
person xj9    schedule 20.07.2010    source источник
comment
Вы имеете в виду :before и :after? И здесь они отлично работают; Что вы пытаетесь достичь? Вы сталкиваетесь с проблемами, связанными с браузером?   -  person strager    schedule 20.07.2010
comment
Да, это то, что я имел в виду. И я не думаю, что это что-то особенное для браузера. Я беру некоторые идеи из nicolasgallagher.com/demo/pure-css -speech-bubble / bubble.html, и все работало с вашими стандартными элементами уровня блока, но не применительно к текстовой области.   -  person xj9    schedule 20.07.2010
comment
У меня не работает в Chrome и Firefox. textarea::after{ content: "some text" } не работает, но form::after{ content: "some text" } работает. Обратите внимание, что стиль двойного двоеточия - это синтаксис CSS3, а одинарное двоеточие - синтаксис CSS2. Ни работать с текстовым полем.   -  person Rupert Madden-Abbott    schedule 20.07.2010
comment
Похоже, Opera (браузер, который я использую) - это странный человек, поскольку он использует содержимое :after textarea. Все, что я вижу в спецификации CSS2 по этой проблеме, - это Примечание. Эта спецификация не полностью определяет взаимодействие: before и: after с заменяемыми элементами (такими как IMG в HTML). Это будет определено более подробно в будущих спецификациях. Другими словами, это может быть поведение, определяемое реализацией.   -  person strager    schedule 20.07.2010

Ответы (3)


arrow_upward
99
arrow_downward

:before и :after не будут работать с text-area (или любым элементом, который не может содержать другой элемент, например img или input), потому что сгенерированное содержимое псевдоэлемента помещается внутри элемента, но < em> до или после содержимого этого элемента и действует как элемент. Псевдоэлемент не размещается до или после самого родительского элемента (вопреки некоторой информации, которую можно найти в Интернете). Проиллюстрировать:

Если у вас есть этот css:

p:before {content: 'before--'}
p:after {content: '--after'}

Тогда html вот так:

<p>Original Content</p>

Эффективно отображается на экране , как если бы исходный код был:

<p>before--Original Content--after</p>

Не , как если бы исходный код был:

before--<p>Original Content</p>--after

Вот почему теги, которые не могут содержать «контент» элемента html (например, упомянутые выше), не распознают псевдоэлементы, поскольку нет «места» для создания этого контента. textarea может содержать «контент», но только чистый текстовый контент.

person ScottS    schedule 20.07.2010
comment
Спасибо за это, долго искал, почему: before и: after не работают с img тегами! - person Benjamin Intal; 09.10.2011

arrow_upward
0
arrow_downward 

<div class='tx-div-before'></div>

используйте это перед текстовым полем и

<div class='tx-div-after'></div>

используйте этот код после textarea. и добавить до и после элемента psedu.

person Shakib    schedule 16.07.2020
comment
Добавляя ответ на вопрос десятилетней давности к принятому ответу, важно указать, на какой новый аспект вопроса вы обращаетесь. С технологиями, которые, возможно, изменились за эти 10 лет, также важно отметить, изменяют ли эти изменения ответ. - person Jason Aller; 16.07.2020

arrow_upward
-8
arrow_downward

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

#gallery_name {
   position:relative;
}
#gallery_name:focus:after {
   content: "Max Characters: 30";
   color: #FFF;
   position: absolute;
   right: -150px;
   top:0px;
}

<input id="gallery_name" type="text" name="gallery_name" placeholder="Gallery Name">
person Kyle Ramirez    schedule 02.06.2012