Use CSS to automatically add 'required field' asterisk to form inputs

Question

What is a good way to overcome the unfortunate fact that this code will not work as desired:

    Name:         


        
      

Answer 1

input[required], select[required] {
    background-image: url('/img/star.png');
    background-repeat: no-repeat;
    background-position-x: right;
}

Image has some 20px space on the right not to overlap with select dropdown arrow

And it looks like this: