0

I want to put a red star after placeholder. Both Chrome and Safari are OK, but doesn't work at Firefox. What I did is

input::-webkit-input-placeholder:after {  content: "*";
    color: red; }
input::-moz-placeholder:after {  content: "*";
    color: red; }
input:-ms-input-placeholder:after {  content: "*";
    color: red; }

in CSS and

<div class="form-group">
    <input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Email" >
</div>

in HTML. Why there is nothing after Email in FIrefox.

batuman
  • 7,066
  • 26
  • 107
  • 229
  • What is in your link is: ::-webkit-input-placeholder:after { content: "*"; color: red; } Not: input::-webkit-input-placeholder:after I am not familiar with the "::" syntax in css, but if you just follow the example it'll probably work. – SScotti Mar 04 '16 at 04:02
  • @sscotti, they are same – batuman Mar 04 '16 at 04:11
  • Now I found that chrome and safari are fine. Just chrome has problem. – batuman Mar 04 '16 at 04:39
  • Not sure that you got your answer re mozilla. If not this might help: [link](http://stackoverflow.com/questions/24069830/2-colors-in-one-placeholder-of-input-field), from another stack overflow post. – SScotti Mar 04 '16 at 05:38

2 Answers2

1

The problem is that the ::after pseudo only works with -input-placeholder (or -placeholder) in Chrome. Notice in this fiddle, 

input::-moz-placeholder {
    color: red;
}

input:-ms-input-placeholder {
    color: red;
}

work in Firefox and IE, respectively, but not 

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

or

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

jsFiddle

symlink
  • 11,984
  • 7
  • 29
  • 50
0

The fiddle example that you gave has:

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

You have input before the :: ?

SScotti
  • 2,158
  • 4
  • 23
  • 41
  • Now I found that chrome and safari are fine. Just chrome has problem. – batuman Mar 04 '16 at 04:39
  • Might look at this. [link](http://stackoverflow.com/questions/12834939/css-after-input-placeholder-not-working-in-mozilla), there must be a workaround. – SScotti Mar 04 '16 at 04:48
  • I'm not sure that feature is universally supported (i.e. mozilla). Not sure that you can specify 2 pseudo elements in one declaration. 2 pseudo classes it seems yet, 2 pseudo elements maybe not. Have to research that a bit. – SScotti Mar 04 '16 at 04:59
  • Also maybe read this [link](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements) – SScotti Mar 04 '16 at 05:15
  • This might work for you from stack overflow, [link](http://stackoverflow.com/questions/24069830/2-colors-in-one-placeholder-of-input-field), see below also. – SScotti Mar 04 '16 at 05:33