Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Add span inside form's placeholder

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

like image 750
user3067592 Avatar asked Mar 14 '14 21:03

user3067592


3 Answers

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>
like image 110
Sergey Nakhankov Avatar answered Nov 15 '22 23:11

Sergey Nakhankov


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

like image 41
Praxis Ashelin Avatar answered Nov 16 '22 00:11

Praxis Ashelin


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();
    } );
like image 27
Robert Messerle Avatar answered Nov 15 '22 22:11

Robert Messerle