How can I apply different style for main and sub text in input placeholder?

Question

I want to apply different style for main and sub text in input placeholder as below;

enter image description here

Password text style as;

{
    color:#959595;
    font-size: 16px;
}

(at least 4 characters) sub text style as I want;

{
    color:#cfcfcf;
    font-size: 14px;
}

How can I do?

possible duplicate of [Styling the placeholder of an input, how can I do this?](http://stackoverflow.com/questions/6485247/styling-the-placeholder-of-an-input-how-can-i-do-this) — Tomasz Kowalczyk, Nov 20 '14 at 11:58
`placeholder` cannot be split as it's an attribute not an element...at least AFAIK — Paulie_D, Nov 20 '14 at 12:01
possible duplicate of [How can I make a split-text input placeholder?](http://stackoverflow.com/questions/14567828/how-can-i-make-a-split-text-input-placeholder) — Paulie_D, Nov 20 '14 at 12:02
@TomaszKowalczyk my question is different please read it again. I want to apply different style to each text block — midstack, Nov 20 '14 at 12:02
The only way to do this is with a `contenteditable` element instead of an ``. — David Thomas, Nov 20 '14 at 12:03
@midstack I know, read that duplicates to learn that it is not possible. — Tomasz Kowalczyk, Nov 20 '14 at 12:03
In addition to asking for something that is not possible, the question tries to use a placeholder *instead of a label*, contrary to what HTML5 says at http://www.w3.org/TR/html5/forms.html#attr-input-placeholder — Jukka K. Korpela, Nov 20 '14 at 12:20

score 1 · Accepted Answer · answered Nov 20 '14 at 14:43

First of all, check the FIDDLE DEMO You can achieve this effect with a little JS work, in a cross browsers manner:

HTML

<input type="text" placeholder="Password" data-placeholder-note="(at least 4 characters)" />

JS (with jQuery)

$('input').each(function(){
    var current = $(this);
    var note = $('<span />').addClass('placeholder')
        .text(current.data('placeholder-note'))
        .insertAfter(this);
    var origPH = current.attr('placeholder');
    current
        .focus(function(){
            current.attr('placeholder', '');
            note.hide();
        }).blur(function(){
            current.attr('placeholder', origPH);
            note.show();
        });
    note.click(function(){current.focus();});
});

CSS

input {
    position:relative;
    font-size:18px;
    width:220px;
    padding:4px;
    border-radius:4px;
}
span.placeholder {
    font-size:12px;
    position:relative;
    left:-135px;
    color:#bbb;
}

score -1 · Answer 2 · answered Nov 20 '14 at 12:20

you can apply a class to the input elements:

<input type="text" placeholder="subtext"></input>
<input type="text" class="pass" placeholder="password"></input>

You have to combine the class with the pseudo element

input::-webkit-input-placeholder {    color:#cfcfcf;font-size: 14px; }
input::-moz-placeholder {    color:#cfcfcf;font-size: 14px;}
input:-ms-input-placeholder {    color:#cfcfcf;font-size: 14px; }
input:-moz-placeholder {    color:#cfcfcf;font-size: 14px; }

input.pass::-webkit-input-placeholder { color:#959595;font-size: 16px; }
input.pass::-moz-placeholder { color:#959595;font-size: 16px;; }
input.pass:-ms-input-placeholder { color:#959595;font-size: 16px; }
input.pass:-moz-placeholder { color:#959595;font-size: 16px; }

How can I apply different style for main and sub text in input placeholder?

2 Answers2