Forms – enable superpowers

As mentioned previously, in the input, there is no way to use :before and :after pseudoelements. But a quick trick to do that, which will be better described in the following sections, is to wrap it in some other elements. It always helps to keep some label and input groups and additionally allows to append the :before and :after pseudoelements.

For example, take the following bare HTML form code:

<form>
    <input type="text" placeholder="Login"/>
    <input type="password" placeholder="Password"/>
</form>

Now you just need to add wrapping elements:

<form>
    <div class="inputKeeper">
        <input type="text" placeholder="Login"/>
    </div>
    <div class="inputKeeper">
        <input type="password" placeholder="Password"/>
    </div>
</form>

Where is the ...

Get Professional CSS3 now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.