How to display code box with "onclick" select text and "mouse actions"

You can use <textarea> code for the code box its is easy .
Just write your text between the <textarea></textarea> code .


Let see some more actions with this hack:-

CODE BOX WITH "ONCLICK SELECT" and MOUSE ACTIONS

<textarea id="CodeBox" name="DATLBOS" onclick="this.select()" onfocus="this.select()" onmouseout="this.style.borderColor='#555555'"onmouseover="this.style.borderColor='#c90000'" readonly="readonly" style="border-color: rgb(85, 85, 85); height: 35px; overflow: hidden; width: 200px;">YOUR TEXT AREA</textarea>

• Some details to customize 
  

1. YOUR TEXT AREA  [Fill this area with the text for the box]
2.  onmouseout="this.style.borderColor='blue'" [put the colour you want in the "code box border" mouse pointer is out of the code box . Here it is in "blue" colour ].
3.  onmouseover="this.style.borderColor='green'" [put the colour you want in the "code box border" mouse pointer is inside of the code box . Here it is in "green" colour ].
4. Width: 200px[width of your code box]
5. height: 35px[height of your code box]
6. readonly="readonly" [readonly will protect your text inside the box for editing  .If you want to edit the text inside it just remove it from the code . ] It will look like this :-

Here the readonly code has been removed so you can edit the text inside it .

• NOTE SOME IMPORTANT TIPS BEFORE YOU USE IT .

1.  Inside the text area .Please , convert these symbols if you are going to put in it.

• &gt; : >
• &lt;  :<
  

    2. If your blog is enable to convert new lines into <br> then don't leave lines in the text area .
Below there are three lines have been converted to <br> as m blog is enable to convert new lines to <br> .<br /> <br /> <br /> <br /> <br />

ENJOY !