2 colors in one input field placeholder

Question

I need to create an input that has 2 colors in a placeholder.

and here is a solution that works well in Chrome.

http://jsfiddle.net/vmuJm/

HTML

<input placeholder="Name" class="required" /> 

CSS

 .required::-webkit-input-placeholder:after { content:'*'; color: red; } .required:-moz-placeholder:after { /* Firefox 18- */ content:'*'; color: red; } .required::-moz-placeholder:after { /* Firefox 19+ */ content:'*'; color: red; } .required:-ms-input-placeholder:after { content:'*'; color: red; } 

But my current FF 29.0.1 does not show content: after, so this solution does not work. Is there any other way to get 2 colors in one place with css and html?

Chrome:

Ff:

Answer 1

Here is a cross-browser solution that does not use Javascript:

Live demo

The built-in elements of such an input do not support :before and :after . As it turned out, complicating the placeholder selector and its pseudo-classes do not fully support all browsers.

Thus, the workaround is to add a label located relative to the top of the input field, with the for attribute pointing to the input field. Thus, when the user clicks the label (false placeholder), the focus moves to the input field.

Replace your class="required" with the required="required" attribute. This gives you the opportunity to use the : invalid and : valid selectors, and also allows the browser to display a validation error when submitting the form with the required fields blank.

 <form> <input type="text" id="name" name="name" required="required" /> <label for="name">Name</label> <br/> <input type="email" id="email" name="email" placeholder="Email" /> <br/> <input type="submit" /> </form> input { width: 160px; } input[type=submit] { width: auto; } input[required] + label { color: #999; font-family: Arial; font-size: .8em; position: relative; left: -166px; /* the negative of the input width */ } input[required] + label:after { content:'*'; color: red; } /* show the placeholder when input has no content (no content = invalid) */ input[required]:invalid + label { display: inline-block; } /* hide the placeholder when input has some text typed in */ input[required]:valid + label{ display: none; } 

Since no email is required, leave a local placeholder there and just crack the name.

I also changed your email address from type="text" to type="email" for the convenience of users on mobile devices.

Answer 2

The same question is being asked here.

In principle, the answer is no. Depends on the browser.

:before and :after cannot be used for some elements, such as <input> . It depends on the browser, although it seems chrome can do it.

Maybe this can be solved using JavaScript? I dont know

Answer 3

Inspired by Jose's decision, without using the “required” attribute, a live demo can also do what you want.

Key point: css has a selector :not , see Mozilla website