It is possible to have 2 different font sizes in one input placeholder in css?
To apply different styles in the same placeholder is not possible.
What you can do however is either use pseudo elements or a div which behaves as a placeholder and hide/show it when the input is focussed.
This might help:
$("#input").keyup(function() { if ($(this).val().length) { $(this).next('.placeholder').hide(); } else { $(this).next('.placeholder').show(); }});$(".placeholder").click(function() { $(this).prev().focus();});.placeholder { position: absolute; margin: 7px 8px; color: #A3A3A3; cursor: auto; font-size: 14px; top: 7px;}.small { font-size: 10px;}input { padding: 5px; font-size: 11pt; position: relative;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><input id="input" type="text" /><div class="placeholder">Email <span class="small">address</span></div>
CSS only Solution
.input-field { position: relative; display: inline-block;}.input-field > label { position: absolute; left: 0.5em; top: 50%; margin-top: -0.5em; opacity: 1; display: none;}.input-field > input[type=text]:placeholder-shown + label { display: block;}.input-field > label > span { letter-spacing: -2px;}.first-letter { color: red; font-size:100%;}.second-letter { color: blue; font-size:50%;}.third-letter { color: orange; font-size:75%;}.fourth-letter { color: green; font-size:100%;}.fifth-letter { color: yellow; font-size:25%;}<div class="input-field"> <input id="input-text-field" type="text" placeholder=" "></input> <label for="input-text-field"> <span class="first-letter">H</span> <span class="second-letter">E</span> <span class="third-letter">L</span> <span class="fourth-letter">L</span> <span class="fifth-letter">O</span> </label></div>JS solution
addListenerMulti(document.getElementById('input-text-field'), 'focus keyup', blurme); function blurme(e) { var element = e.currentTarget; element.classList[(element.value.length !== 0) ? "add" : "remove"]('hide-placeholder'); } function addListenerMulti(el, s, fn) { s.split(" ").forEach(function(e) { return el.addEventListener(e, fn, false) }); } .input-field { position: relative; display: inline-block; } .input-field > label { position: absolute; left: 0.5em; top: 50%; margin-top: -0.5em; } .hide-placeholder + label { display: none; } .input-field > label > span { letter-spacing: -2px; } .first-letter { color: red; font-size:100%; } .second-letter { color: blue; font-size:100%; } .third-letter { color: orange; font-size:100%; } .fourth-letter { color: green; font-size:50%; } .fifth-letter { color: black; font-size:50%; } <div class="input-field"> <input id="input-text-field" type="text"> <label for="input-text-field"> <span class="first-letter">H</span> <span class="second-letter">E</span> <span class="third-letter">L</span> <span class="fourth-letter">L</span> <span class="fifth-letter">O</span> </label> </div>