2

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?

Metal Mathematician
  • 388
  • 1
  • 3
  • 15
  • 3
    Why do you even need that span? – litelite Aug 15 '17 at 12:34
  • 1
    Your span's background is probably still transparent, which is the default. Set the span's background to white to hide the input. – jlahd Aug 15 '17 at 12:34
  • I need it to manipulate the color, like here: https://stackoverflow.com/questions/45233743/javascript-how-to-change-color-to-only-part-of-the-string-in-an-input-field – Metal Mathematician Aug 15 '17 at 12:35
  • _“you can still see that the text is a little more bold and letters are thicker”_ - well then you should probably start by applying the same font properties to the input field and the span (which at least from browser default stylesheets is rather likely not going to be the case.) – CBroe Aug 15 '17 at 12:36
  • fair point, I was just wondering if there is a nicer way of doing this than overlapping two texts – Metal Mathematician Aug 15 '17 at 12:40
  • rather, you can set span:hover {cursor:text;} in your css – Cruiser Aug 15 '17 at 12:44
  • 2
    @Cruiser: The OP means the insertion point in the text field, not the mouse cursor. – T.J. Crowder Aug 15 '17 at 12:46
  • @JurģisTomsLiepiņš I don't like this approach (of manipulating color with span over the input field) since you wouldn't be able to select the words in input field with your mouse. – Stanislav Kvitash Aug 15 '17 at 12:55
  • @StanislavKvitash hmm... it actually is possible, but it doesn't look very nice... I am open for different solution – Metal Mathematician Aug 15 '17 at 13:01
  • @JurģisTomsLiepiņš yes, it doesn't work nice. I assume you can try using [`contenteditable="true"`](https://www.w3schools.com/tags/att_global_contenteditable.asp) instead of your input. How to make it single line [is described here](https://stackoverflow.com/questions/6831482/contenteditable-single-line-input). And in [this answer](https://stackoverflow.com/a/44675864/4222181) I've tried to make a basic example of words highlighting (see 4) in `contenteditable="true"`. – Stanislav Kvitash Aug 15 '17 at 13:07

2 Answers2

2

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.

Doomenik
  • 868
  • 1
  • 12
  • 29
1

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>
Jegadesh B S
  • 689
  • 1
  • 6
  • 14