CSS3: после псевдоэлемента со входом

Просто игра с :before и :after.

Кажется, я не могу использовать их в/с кнопкой input? Думаю, что я мог бы использовать его, он отображает звездочку для обязательных полей. Не обязательно, что я буду делать, просто вариант

input {
    position: relative;
}
input:after {
    content: ''; 
    background: url(accept.png) 0 0 no-repeat; 
    height: 16px; 
    position: absolute; 
    right: -20px; 
    top: 5px; 
    width: 16px;
}

Тот же код отлично работает на li

li {
    clear: both; 
    margin: 0 0 10px; 
    position: relative;
}
li:after {
    content: ''; 
    background: url(accept.png) 0 0 no-repeat; 
    height: 16px; 
    position: absolute; 
    right: -20px; 
    top: 5px; 
    width: 16px;   
}

Ответ 1

Я также подумал, что то же самое было бы полезно, но, увы, самый простой способ, с помощью которого я мог получить над/после псевдоэлементов надежно, - это обернуть ввод в тег SPAN и применение к нему класса.

В этом обсуждении дается некоторое представление о том, почему input:after не работает: http://forums.mozillazine.org/viewtopic.php?f=25&t=291007&start=0&st=0&sk=t&sd=a

Вы можете сделать что-то вроде:

.required:after {
    content: "REQUIRED";
    color: orange;
    margin-left: 1em; /* space between the input element and the text */
    padding: .1em;
    background-color: #fff;
    font-size: .8em;
    border: .1em solid orange;
}

<span class="required"><input id="foo" /></span>

Ответ 2

Здесь задан принципиально идентичный вопрос, который имеет большое объяснение: fooobar.com/questions/12142/...

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

Обратите внимание, что вместо использования <input type="submit|button"> вы можете использовать <button>, который может иметь детей, поэтому для этого ввода есть "обходной путь" (ну, если у вас есть контроль над разметкой;)

Ответ 3

Я просто просмотрел одно и то же - только я хотел использовать его для отображения accesskeys:

*[accesskey]:after {
     content:' [' attr(accesskey) ']';
}

Не так сильно, что нужно написать значение accesskey более чем в одном месте, что обычно добавляет риск не сохранять значения одинаковыми, и это может быть допустимым UE-wise = 0/

Ответ 4

Этот ответ (текст ниже строки) не работает (для текстового input в любом случае), но его оставляют на месте вне случайности, он спасает кого-то другого беспокоясь о попытках добиться того же конечного результата с помощью тех же средств. Единственный способ сделать это: @Tim отмечает в своем ответе обертывание input (или других) элементов в другом элементе, например span, а затем стиль, который с псевдоэлементом :after.

JS Fiddle демонстрационный пример рабочего примера.

Ум, они, похоже, работают вполне нормально JS Fiddle demo, за исключением того, что без position: absolute содержимое :after появляется внутри сам элемент (внутри кнопок или флажков и т.д.).

HTML:

<button class="req">button</button>
<input class="req" type="text" />
<input class="req" type="radio" />
<input class="req" type="checkbox" />
<textarea class="req"></textarea>

CSS

input,
textarea {
    display: block;
}
.req {
    position: relative;
}

.req:after {
    content: "*";
    margin: 0 0 0 0.5em;
    position: absolute;
    top: 0;
    right: -1em;
}

Ответ 5

Мне нужно было делать это с помощью входов, но не имел доступа к изменению html, который был создан Wordpress и JQuery. Ну, может быть, я мог бы, но это было бы долгое решение. По той же причине: доступность.

Итак, одно возможное решение, которое вы можете использовать:

#comment-form input[type=text],
#comment-form input[type=email],
#comment-form input[type=url],
#comment-form input[type=password] {
width:40%; margin-right:60%; }

Если сообщение об ошибке появляется после этого, оно больше не может входить в ту же строку и получает столкновение. Конечно, вам нужно будет подумать, можете ли вы поддерживать процентную ширину в своем макете, но вы получаете идею.