It is possible to have 2 different font sizes in one input placeholder in css?

Question

Is it possible to have 2 different font sizes in one input placeholder in CSS?

something like this design:

In regular html you can make it with span,:before,&:after and etc.

but in input you cant make all this things so i want to understand if its possible...

thanks

thanks @ovokuro but i am afraid that that's not the solution in this case because I'm using some WordPress form builder - so i can't use this HTML - only a real input placeholder — Erez Lieberman, Dec 28 '16 at 11:46
I think what you want won't be easy.. Ideally you could use ::-webkit-input-placeholder::after { content: "TEXT"; font-size: "20px";} -- but I don't think the pseudoelement will work on placeholder in most browsers — sol, Dec 28 '16 at 11:50
yep - This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future. — Erez Lieberman, Dec 28 '16 at 12:02
what is the real html involved here ? input but, what else ? is it wrapped in a label, a p, a div, or just standing among others in a form ? Please post your full HTML — G-Cyrillus, Dec 28 '16 at 12:26
that's look something like this: but as a wrote before im using some wp form builder so i cant use this solutions — Erez Lieberman, Dec 28 '16 at 12:41
You can't use posted solutions, but you can easily achieve this with just custom CSS. Your HTML structure is enough for this. Modify dream hunter's CSS solution with the help of two pseudo elements for different font sizes instead of labels he used. — dfsq, Dec 28 '16 at 12:54

nashcheez · Answer 1 · 2016-12-28T12:11:45.017

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>

thanks, @nashcheez - that looks great idea and im sure i will use it in other cases - but here I'm using some WordPress form builder - so i can't use this HTML - only a real input placeholder — Erez Lieberman, Dec 28 '16 at 12:01
@ErezLieberman I am sorry but I guess modifying the placeholder in a way you want is not natively possible. — nashcheez, Dec 28 '16 at 12:10

ADH - THE TECHIE GUY · Answer 2 · 2016-12-28T16:59:26.583

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>

thanks, @dream hunter - here I'm using some WordPress form builder - so i can't use this HTML - only a real input placeholder — Erez Lieberman, Dec 28 '16 at 12:15

It is possible to have 2 different font sizes in one input placeholder in css?

2 Answers2