Can I use multiple pseudo selectors focus with before/after on the same element?

Question

I'm trying to combine using pseudo selectors with pseudo elements to create a custom tooltip.

My HTML:

<input id='test'/>

My CSS:

#test {
    position: relative;
}

#test:focus {
    background-color: #08c;
}

#test:focus:before {
    position: absolute;
    left: 100%;
    width: 10px;
    height: 10px;
    background-color: black;
}

A fiddle running the code: http://jsfiddle.net/9ujEH/

Currently the input will change to blue when focused as a result of #test:focus but the black sqaure doesn't show up like I thought it would from #test:focus:before.

Solution 1

Pseudo elements can only be defined on container elements. Because of the way they are rendered within the container itself as a DOM element. inputs cannot contain other elements hence they're not supported. A button on the other hand, although a form element, supports them because it's a container of other sub elements.

More from the 2.1 spec

The ::after and ::before pseudo-elements are now using the double-colon to avoid confusion with pseudo-classes (which obviously use :), although older version of IE (7,8) won't recognize the double colons .. keep that in mind if your trying to support them.

Solution 2

This doesn't work because input, like img, elements are void/replaced elements, and have no 'content' to speak of, therefore it seems there's no place for the pseudo-elements to be inserted within the elements.

Using a div, for example, you can use multiple psuedo-selectors, such as:

div:hover::before {
    /* CSS */
}

JS Fiddle proof-of-concept.

References:

• Replaced Elements, from MDN.

Solution 3

You can achieve what you are trying to do by using the :focus-within CSS pseudo-class.

Just wrap your input element in a <div> (or any container element) as shown:

<style>
    #test {
        position: relative;
    }

    #test:focus {
        background-color: #08c;
    }

    #mydiv:focus-within::after {
        content: "Careful! This field is case-sensitive!";
    }
</style>

<div id='mydiv'>
    <input id='test' />
</div>

Related:

• :focus CSS pseudo-class
• ::after CSS pseudo-elements

Solution 4

:after & :before is not working on replaced element & input is an replaced element.

Check this http://reference.sitepoint.com/css/replacedelements

View more solutions