Add span inside form's placeholder

Question

I wanna add a color asterix in my form\'s placeholder, is it possible?

Answer 1

As far as I know, this is not possible.

One solution I have seen used in the past is to add a background-image of a red asterisk to your input field, but that makes it difficult to duplicate the visual alignment you are going for. More info on this method: Use CSS to automatically add 'required field' asterisk to form inputs

Another solution would be to add the span (and placeholder text) outside of the input field, but that would require some JavaScript to control when it is and isn't visible.

Here is a JSFiddle I just created for this method (using jQuery): http://jsfiddle.net/nLZr9/

HTML

    

        
            Email Address
            *
        
        
    

CSS

.field {
    position: relative;
    height: 30px;
    width: 200px;
}
input, label {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    top: 0;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    text-indent: 5px;
    line-height: 30px;
}

JS

$('.field input')
    .on( 'focus', function () {         
        $(this).siblings('label').hide();
    } )
    .on( 'blur',  function () {
        if ( !$(this).val() )
            $(this).siblings('label').show();
    } );