Add span inside form's placeholder

Question

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

Urbanist

Answer 1

Here is pure css solution 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>

Unsocial

Answer 2

At first glance it doesn't seem possible, but it may 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

Spongy

Answer 3

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

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

Fisher

Answer 4

You can try the following :

HTML

<div class="hold">
    <input type="text" placeholder="" required="required">
    <span class="req_placeholder">Name <span>*</span></span>
</div>

CSS

.hold {
    position: relative;
}

input[required="required"]:valid + .req_placeholder {
    display: none;
}

.req_placeholder {
    position: absolute;
    top: 2px;
    left: 2px;
}

.req_placeholder span {
    color: red;
}

Blasto

Answer 5

I found a jQuery plugin that might suit you, the pholder plugin.
If you look the demo, the placholder of the "Name" field is red.

There may be other plugins or maybe you can edit it. :)

Exciting

Answer 6

This is a good case for pseudo-elements.

.someclass {
      position:relative;
}

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

...adjust to your own layout.

Lovell

Because it doesn't seem to work, I guess. Have you tested this code? If you got it to work, please add a fiddle or the accompanying html. – Spongy

...made a typo, someclass vs. someClass. Works now. – Lovell

Answer 7

You can use pseudo elements in CSS (not supported in old 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>

Renunciation