1

I'm trying to style the input text of a textarea so that the words being entered are highlighted. This is not as simple as just adding a background-color to the text area.

I'm trying to do something kind of like this example:

http://jsfiddle.net/terra823/t4esU/

html

<h1>This is what I'm trying to do with the input text</h1>
<p>Cool text</p>
<p>Cool text 2</p>
<p>Cool text 3</p>


<textarea> </textarea>

css

textarea{
    width:130px;
    height:130px;
}

p{
    size:12px;
    background:red;
    color: white;
 }

The difference is that I'd like the highlight to conform to the width and line-height of the text itself.

I realize this question seems very specific, but in doing research I couldn't come across anything that addresses styling textarea input text with either CSS or JS.

Appreciate any help!

terra823
  • 92
  • 1
  • 10
  • 3
    You wont be able to stylize the textarea content. Just the box. BUT, you can find an inspiration on : http://stackoverflow.com/questions/8304436/css-styling-text-areas-like-notebook-look – Milche Patern Mar 19 '13 at 19:10
  • There are a number of ways to do it with JavaScript, but not with CSS. – isherwood Mar 19 '13 at 19:11
  • I'm open to Javascript methods as well. – terra823 Mar 19 '13 at 19:17
  • Contents a TEXTAREA cannot be styled. There are text EDITORS, like CKEditor and timeMCE that perform what you're talking about. They make it LOOK like a textarea, but it's really a block of HTML in a DIV that is being controlled via JavaScript. This is quite complicated and not trivial. – Diodeus - James MacFarlane Mar 19 '13 at 19:27
  • Thanks, didn't mean to suggest it's trivial. – terra823 Mar 19 '13 at 19:33

0 Answers0