Placeholder with asterisk mark having different color

Asked Apr 01 '16 at 12:22

Active Apr 08 '16 at 08:28

Viewed 431 times

I am stuck with this issue - I want to give a place-holder text a different color and the asterisk mark different color, I am using following code

CSS

input[type=text] {
    &.required{
        &::-webkit-input-placeholder {
                &:before{ content: '*'; color:@pink; vertical-align: top; font-size: small; } 
        }
        &:-moz-placeholder:after {
                &:before{ content: '*'; color:@pink; vertical-align: top; font-size: small; } 
        }

        &::-moz-placeholder:after {
                &:before{ content: '*'; color:@pink; vertical-align: top; font-size: small; } 
        }

        &:-ms-input-placeholder:after {
                &:before{ content: '*'; color:@pink; vertical-align: top; font-size: small; } 
        }
    }
}

HTML

<input placeholder="Adresse courriel" type="email" id="edit-submitted-adresse-courriel" name="submitted[adresse_courriel]" size="60" class="form-text form-email required">

This worked before only on chrome but now without making any changes it stopped working.

Condition: I cannot add <span> inside input as its webform can't add html tags for placeholder.

Hoping to get some solution

edited Apr 08 '16 at 08:28

Gerwin

1,572
5
23
51

asked Apr 01 '16 at 12:22

nikita

Check this link : http://stackoverflow.com/questions/35217144/css-pseudo-element-input-placeholderafter-to-show-with-or-without-value-in-tex Seems to not work anymore in latest Chrome versions – Vincent G Apr 01 '16 at 12:40
Ok thanks Vincent Will check this – nikita Apr 01 '16 at 12:42
@nikita any luck you got this fixed? – Rajshekar Reddy Apr 08 '16 at 08:56

Placeholder with asterisk mark having different color

0 Answers0