CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Metal Mathematician
Metal Mathematician

Reputation: 416

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?

Upvotes: 2

Views: 2091

Answers (2)

Doomenik
Doomenik

Reputation: 866

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.

Upvotes: 2

Jegadesh B S
Jegadesh B S

Reputation: 709

Ok, after some time, here's what I landed on:

input{
  position: absolute;
    top: 25px;
  left: 25px;
}
#bottom {
  z-index: 1;
}
#top {
  z-index: 3;
}
<div class="txt">
<input type="text" id="bottom" value="bottom_box">
<input type="text" id="top" value="top_box">
</div><br>

Upvotes: 1

Related Questions