Code: Select all
,Code: Select all
and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
I was wondering what css tricks/methods you can use to highlight text multiple colors within the same textarea. I am aware of how to change attributes to the main textarea tag itself, but this changes the colors for the entire textarea, so thats 1 color for the whole textarea
I'm inspired by this page:
http://tinyurl.com/2ks2be
If you look at the source of html/css you will find:
CSS:
[syntax="css"]#search {height:60px; width:99.75%;}
#input {height:375px; width:99.75%; margin-top:10px;}
.smartField {position:relative; overflow:auto; border:1px solid #ccc; background:#f9f9f9;}
.smartField pre,
.smartField textarea {font:100% "courier new",monospace; width:100%;}
.smartField pre {z-index:1; color:#f9f9f9;}
.smartField textarea {z-index:2; border:0; background:transparent; position:absolute; top:0; height:100%; min-height:100%; overflow:hidden;}
/* Highlighting ------------------------------------- */
b, i, u {font-weight:normal; font-style:normal; text-decoration:none;}
#input b {background:#fff000; color:#fff000;}
#input i {background:#80c0ff; color:#80c0ff;}
#search b {background:#aad1f7; color:#aad1f7;}
#search i {background:#f9ca69; color:#f9ca69;}
#search i b {background:#f7a700; color:#f7a700;}
#search i u {background:#efba4a; color:#efba4a;} /* No RB equivalent */
#search b.g1 {background:#d2f854; color:#d2f854;}
#search b.g2 {background:#9ec70c; color:#9ec70c;}
#search b.g3 {background:#ecc9f7; color:#ecc9f7;}
#search b.g4 {background:#54b70b; color:#54b70b;}
#search b.g5 {background:#b688cf; color:#b688cf;}
#search b.err {background:#ff4300 !important; color:#ff4300 !important;}Code: Select all
<div id="body">
<div id="search" class="smartField">
<textarea cols="100" rows="3" tabindex="1">look +_++how it is (hi(ghligh)ted)</textarea>
</div>
<div id="input" class="smartField">
<textarea cols="100" rows="10" tabindex="2"></textarea>
</div>
</div>What puzzles me is that there are no tags inside the textarea itself and around the highlighted text, yet obviously there are css styles made for highlighting text. So how can you apply a style if you don't put tags around the text!??
I'm interested in seeing any js and/or html and/or css solution to this
-thanks
feyd | Please use[/syntax]
Code: Select all
,Code: Select all
and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]