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

Detestation

Does this help? https://mcmap.net/q/850679/-add-span-inside-form-39-s-placeholder – Warthman

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 – Detestation

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 – Warthman

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. – Detestation

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 – Catrinacatriona

that's look something like this: <span class="wpcf7-form-control-wrap tel-948"><input type="tel" name="tel-948" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel tel" aria-invalid="false" placeholder="נייד"></span> but as a wrote before im using some wp form builder so i cant use this solutions – Detestation

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. – Archival

Answer 1

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>

Culbert

thanks, @Culbert - 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 – Detestation

@ErezLieberman I am sorry but I guess modifying the placeholder in a way you want is not natively possible. – Culbert

Answer 2

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>

Scrannel

thanks, @dream hunter - here I'm using some WordPress form builder - so i can't use this HTML - only a real input placeholder – Detestation