Jurģis Toms Liepiņš Jurģis Toms Liepiņš -3 years ago 102
CSS Question

Hide only the content of an input field

I have a span overlapping my input field, that updates its content as you type into the input field.

Even though I positioned the span perfectly on the input text, you can still see that the text is a little more bold and letters are thicker.

enter image description here

(field nr.1- with span, nr.2- without)

I tried hiding the entire input field, but then also the cursor disappears, without which typing is very confusing.

Is there a way that I could hide only the text of the input field?

Answer Source

Just set your input text invisible and the cursor black by:

  #box {
      color: transparent;
      caret-color: black;
<input type="text" id="box" value="some_sample_text">

So this way the text is invisible but the currsor shows up. With your span overlaying this should be exactly what you want. But don´t forget your input field must have the same size and fontsize or the caret is on the wrong position.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download