CSS3 :after pseudo element with input

Question

Just playing with :before and :after.

It seems I can't use them on/with an input button? Thought I could potentially use it do display an asterisk for required fields. Not necessarily what I will do, just an option

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

Same code works fine on an 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;   
}

Answer 1

I've also thought that the same thing would be useful, but alas, the simplest way I have been able to get the before/after pseudo elements to work reliably is by wrapping the input in a SPAN tag and applying a class to that.

This discussion provides some insight as to why input:after doesn't work: http://forums.mozillazine.org/viewtopic.php?f=25&t=291007&start=0&st=0&sk=t&sd=a

You can do something like:

.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>

Answer 2

An essentially identical question has been asked here that has a great explanation: https://stackoverflow.com/a/4660434/749227

To summarize, inputs are not containers and cannot have children. The content inserted by the :before and :after pseudo-elements normally can't therefore be inserted into inputs.

Note that rather than using <input type="submit|button"> you can use <button> which can have children, so for that input there's a 'workaround' (well, if you have control over the markup ;)

Answer 3

I just looked into the same thing - only I wanted to use it to display accesskeys:

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

Not so keen on having to write the accesskey value more than one place cause that usually adds the risk of not keeping the values the same and that would be terible UE-wise =0/

Answer 4

This answer (the text below the line) doesn't work (for text-based inputs anyway), but it's being left in situ on the off-chance it saves someone else the bother of trying to achieve the same end-result by the same means. The only way to do this is, as @Tim notes, in his answer, to wrap the input (or other) elements in another element, such as a span, and then style that with the :after pseudo-element.

JS Fiddle demo of a working example.

---

Um, they seem to work quite okay JS Fiddle demo, except that, without the position: absolute the :after content appears within the element itself (inside the buttons, or checkboxes and so on).

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;
}

Answer 5

I needed to do this with inputs, but did not have access to change the html, which was generated by Wordpress and Jquery. Well, maybe I could but it would have been a long workaround. Same reason: accessibility.

So, one possible fix you can use:

#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%; }

If the error message comes after, it can no longer fit on same line & gets bumped. Of course you'd need to consider whether you can support percentage widths in your layout, but you get the idea.