A test/experimentation page for custom input boxes using pure HTML/CSS/JS.
Transparent <textarea> on top of a <pre>. Allows for simple styling such as text color. Pretty much indistinguishable from a normal textarea, and select highlighting and text editing are handled by the <textarea>. The only disadvantage is that letters in the <pre> must be in the exact size and position as they are in the <textarea>, so no bold format (unless it's a monospace font) and no additional decorations around the text that push it from its original position (e.g. hex color preview).
This example supports very basic (and slightly broken) JavaScript syntax highlighting.
Keyboard control only. Shift + arrow keys to select text. Supports very basic JavaScript syntax highlighting. Press Tab to insert 2 spaces.