Add a space inside the form filler

Question

I want to add a colored asterisk to the placeholder form, is this possible?

Answer 1

At first glance this seems impossible, but it can be a good alternative to create your own fake spanholder element:

<div class="holder">Email Address <span class="red">*</span></div> <input id="input" size="18" type="text" /> 

Fiddle

Answer 2

Here is a clean solution css IE10 +

 .input-placeholder { position: relative; } .input-placeholder input { padding: 10px; font-size: 25px; } .input-placeholder input:valid + .placeholder { display: none; } .placeholder { position: absolute; pointer-events: none; top: 0; bottom: 0; height: 25px; font-size: 25px; left: 10px; margin: auto; color: #ccc; } .placeholder span { color: red; } 

 <form novalidate> <div class="input-placeholder"> <input type="text" required> <div class="placeholder"> Email <span>*</span> </div> </div> <input type="submit"> </form> 

Answer 3

As far as I know, this is not possible.

One solution that I saw earlier is to add a red star background image to the input box, but this makes it difficult to duplicate the visual alignment that you are going to use. Additional information about this method: Use CSS to automatically add a required field asterisk to form inputs

Another solution would be to add a range (and placeholder text) outside the input field, but this will require some JavaScript to control when it is and is not displayed.

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

HTML

 <form> <div class="field"> <label class="placeholder" for="email"> Email Address <span class="red">*</span> </label> <input id="email" type="text" /> </div> </form> 

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(); } ); 

Answer 4

I found a jQuery plugin that you might like, the pholder plugin.
If you look at the demo, the plunger of the "Name" field will be red.

There may be other plugins, or you can edit them. :)

Answer 5

This is a good example for pseudo-elements.

 .someclass { position:relative; } .someclass:after { position:absolute; top:0; right:10px; content: "*"; color:#ff0000 } 

... customize your own layout.

Answer 6

You can use pseudo-elements in CSS (not supported in older browsers)

 .mandatory::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #ff0000; } .mandatory:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #ff0000; } .mandatory::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #ff0000; } .mandatory:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #ff0000; } .mandatory:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */ color: #ff0000; } 

 <form> <p> <label for="input1">Input 1:</label> <input type="text" id="input1" placeholder="Fill input" class="mandatory" /> </p> <p> <label for="input2">Input 2:</label> <input type="text" id="input2" placeholder="Fill input" /> </p> <p> <label for="textarea">Input 2:</label> <textarea id="textarea" placeholder="Fill textarea"></textarea> </p> </form>