Red Asterisk directly beside placeholder in input box

Question

I've done a bunch of googling, but I can't find an answer anywhere that works for me.

I'm creating a form (for the first time ever) and I need a red asterisk directly next to the placeholder text in the input boxes. Embarrassingly, this is the closest I have been able to get so far:

(I'm also having trouble centreing it ;) But one problem at a time, I suppose

Answer 1

Unfortunately, there isn't a universal way of doing this easily, but there is a way to get support for most browsers. The reason being is that you're going to need to style a placeholder, and there isn't a universal standard on how this is done. But, as long as you don't need support for older IE browsers, you should be okay with the following approach:

First, add a class named "required" or some such to the input box itself. Then, add the following tags:

.required::-webkit-input-placeholder:after {
    content: " *";
    color: red;
}

.required:-moz-placeholder:after {
    content: " *";
    color: red;  
}

.required:-ms-input-placeholder:after {  
    content: " *";
    color: red;  
}