Выберите элементы поля и :after

Почему это не работает? Есть ли обходной путь для этого без добавления дополнительного элемента?

http://jsfiddle.net/86gb2/


css select pseudo-element
person Rane    schedule 04.10.2012    source источник
comment
посмотрите на это - stackoverflow.com/q/11903273/1499781   -  person Zoltan Toth    schedule 04.10.2012
comment
stackoverflow.com/q/3532649/630321   -  person Konstant    schedule 04.10.2012

Ответы (2)


arrow_upward
13
arrow_downward

В вашей скрипке следующее объявление, вероятно, не делает того, что вы ожидаете.

select:after {content: "This doesn't work";}

Это фактически добавит текст после содержимого поля выбора, а не после самого поля выбора. Таким образом, этот текст добавляется после последнего option в разметке. (Что, конечно, недействительно и не будет отображаться браузером.)

Другими словами, если бы у вас была эта разметка:

<a href="#">My link</a>

и этот CSS:

a:after {content: " has now been appended to";}

На самом деле происходит следующее:

<a href="#">My link has now been appended to</a>
person Kevin Boucher    schedule 04.10.2012
comment
Я знаю это. Но я не думал об этом, когда это было для элемента select. Вместо этого я использовал оболочку, тогда она работала так, как я хотел :) - person Rane; 05.10.2012

arrow_upward
-3
arrow_downward

Я бы рекомендовал использовать jQuery API для таких вещей:

$(document).ready(function(){
    $("select").after("<div>this doesnt work, or does it?</div>");
});​
person mschmoock    schedule 04.10.2012