1

Is it possible at allto style only a particular text of an input field.Like SO's tag input field

Assuming, I have an input field <input value="some text"/>, is it possible to style only the text 'some' but not 'text'?

If not, what are some alternatives?

Out of the box
  • 55
  • 7
  • on what basis you are going to define which text need style ? or this will be like start word need style ? – Dupinder Singh May 23 '20 at 17:26
  • Is there any logic, what is the pattern you want to achieve? like even words get style or what ? – Dupinder Singh May 23 '20 at 17:33
  • @ROOT how did you understand what he wants? I mean I can give that answers too, but what OP needs actually that is unclear. Just style the `some`. will this be same everytime? – Dupinder Singh May 23 '20 at 17:56
  • 1
    @DupinderSingh, you are right, I removed my answer anyway, I took a closer look at the question, I didn't read it well before, this is just as as simple as using [select2](https://select2.org/tagging#tagging-with-multi-value-select-boxes) – ROOT May 23 '20 at 18:03
  • @Out of the box Please read this document and try again with a clear Question https://stackoverflow.com/conduct – Dupinder Singh May 23 '20 at 18:10
  • related: https://stackoverflow.com/a/61924566/8620333 – Temani Afif May 23 '20 at 19:51

5 Answers5

1

I don't think it's possible to do it inside <textarea>. A workaround is to create a "fake" textarea using a <div contenteditable>. Then you can use something like:

let input = document.querySelector(".input");


input.innerHTML = input.innerHTML.replace("some", `<span class="hl">some</span>`);

and apply CSS to the span class:

.hl {
  color:red;
}

More on this here

Dostrelith
  • 922
  • 5
  • 13
0

Unfortunately, this is not possible as the style is applied to the entire content of the input field.

Here someone suggested a tricky "solution" to simulate the behaviour, but it's far from being something recommended or built-in.

Balastrong
  • 4,336
  • 2
  • 12
  • 31
0

You won't be able to do it with an input, since the value of an input is not an element in the DOM you can access or style. You would likely need to use a contenteditable element. More info here and here.

shadymoses
  • 3,273
  • 1
  • 19
  • 21
  • Good thought, but it's actually a `textarea`. That's why you can't see any of the markdown or other formatting inline, but see it in a separate preview block instead. – shadymoses May 26 '20 at 19:58
0

I don't think you can do this just using the tag, but there are some workarounds:

Span inside text input field?

javazen
  • 171
  • 1
  • 2
  • 8
0

You can't do this with a regular <input type="text"> or <textarea> element, but with a normal element (like <div> or <p>) made contenteditable, you have all the freedoms of html/css formatting.

<div contenteditable>
    ST<span style="color: red">A</span>CK OVERFLOW
</div>

http://jsfiddle.net/jVqDJ/

The browser support is very good as well (IE5.5+). Read more at https://developer.mozilla.org/en-US/docs/Web/HTML/Content_Editable

Kunal Vohra
  • 2,703
  • 2
  • 15
  • 33