По какой причине не работают :after/:before у select?

Question

[Евгений Попов]

Собственно вопрос в заголовке.
В чем причина и каково решение того что данные всевдоэлементы даже в DOM не значатся для данного тега?

Comments

[Lynn «Кофеман»]

Потому что элементы формы это _replaced elements_ про которые в стандарте написано

www.w3.org/TR/CSS21/generate.html#x5

Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

В CSS3 и далее никакого уточнения так и нет.

Answer 1

[IceJOKER]

А решение сие проблемки - добавить select внутрь какого-нибудь div-a .

<div class="select-wrapper"><select>...</select></div>

Comments

[Евгений Попов]

в том-то и дело что речь о решении без врапперов.

[IceJOKER]

Евгений Попов: js тогда

[Евгений Попов]

IceJOKER: опять же хотелось бы избежать.

[IceJOKER]

Евгений Попов: тогда в Хогвартс, не пойму нафиг так мучаться , когда можно просто обрамить каким-нибудь блоком, который поддерживает :after|:before

[Евгений Попов]

IceJOKER: все просто: хотелось бы чтобы верстка не отличалась от стандартной - вот элемент, вот его функциональность. С обертками вопросов - нет.

[IceJOKER]

Евгений Попов: не совсем понял

[Евгений Попов]

IceJOKER: Хотелось бы чтобы в верстке присутствовал:
<лэйбл><элемент>... а не <лэйбл><враппер><элемент/>враппер>...

[IceJOKER]

Евгений Попов: а нельзя :after :before применять для label?
и глупое "хотение", какая разница, есть там этот враппер или нет..

[Евгений Попов]

IceJOKER: можно но тогда :focus не будет работать... Я вот этот вариант как раз и рассматривал перед тем как написать данный вопрос здесь. Наверное на нем пока и остановлюсь.

[Евгений Попов]

IceJOKER: спасибо.

[IceJOKER]

Евгений Попов: you're welcome

[Андрей Б.]

Евгений Попов, стилизовать с помощью псевдоэлементов элементы которые не могут их принимать, невозможно. Только обходными путями, в том числе и с помощью оберток как вам уже предложили. Кстати в довесок к рабочим и не рабочим элементам Input которые появились в HTML5 jsfiddle.net/j2zc3uzn, работает не во всех.

[Евгений Попов]

Андрей Б.: я и не писал что работает во всех.

[Андрей Б.]

Евгений Попов а я это и не утверждал, лишь "показал рабочий пример"

[Евгений Попов]

Андрей Б.: предлагаю закончить, мы уже покинули контекст. Вы тоже молодец.

Answer 2

[Андрей Б.]

Потому что у select как и у input элементов нет содержимого, а эти псевдоэлементы добавляются именно к нему.

Comments

[Дмитрий]

Как это? А option, optgroup?

[Евгений Попов]

Ох, как же так как же так jsfiddle.net/7Lh9974f Но вот у чекбоксов и радиобатанов которые являются input :after есть и прекрасно работает...

[Андрей Б.]

Не знаю как объяснить по научному, под словом "содержимое" здесь подразумевается не то, что в select можно вставить option и т.д. В спецификации вообще сказано что в новых браузерах должно работать, но по факту они творят что хотят и это баг. red-team-design.com/css-generated-content-replaced...

[Андрей Б.]

Евгений Попов, мне наверное стоило уточнить, что не работает для input не являющимися radio и checkbox. Ну ниче, зато вы потешили своё самолюбие.

[Евгений Попов]

Андрей Б.: нет, я показал рабочий пример.

[Андрей Б.]

Я за вас рад. Странно, что вы имеете "Опыт разработки проектов различного уровня более 11 лет." и только сейчас задались этим вопросом.

[Евгений Попов]

Андрей Б.: до этого не встречался, все просто.

Answer 3

[Дмитрий]

Наверное полому что в валидном DOM внутри select могут быть только option и optgroup. Не?

Comments

[Евгений Попов]

jsfiddle.net/7Lh9974f пример с input... причем здесь вообще наличие вложенных элементов?

[Тимур Орлов]

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