Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML - Can't move cursor inside textarea when CSS is on
    primarykey
    data
    text
    <p>I have a super simple HTML form:</p> <pre><code>&lt;form name="editor" action="#" method="POST"&gt; &lt;textarea name="contents" cols="100" rows="50"&gt;&lt;?php echo $text; ?&gt;&lt;/textarea&gt; &lt;br&gt; &lt;input type="submit" name="submit" value="Submit" /&gt; &lt;/form&gt; </code></pre> <p>Text echoed inside it is HTML code.</p> <p>Now, when CSS is turned off, it works perfectly.</p> <p>But when it's turned on, I: </p> <ul> <li>can't click anywhere inside the textarea text to place the cursor there</li> <li>can't move cursor with arrow keys, it will only move a few characters left and right, and if up/down arrows are pressed, it moves the cursor to the very top/very bottom of the textarea.</li> </ul> <p>What have I tried:</p> <ul> <li>Excluding the textarea from CSS firebug showed applied to it</li> <li>Trying with or without JS to check if that makes a difference</li> <li>Tried different browsers, same issue repeats</li> <li>Turning off CSS completely and then it works, but it's not an option</li> </ul> <p>The only idea I have is that maybe the textarea is inheriting some CSS from somewhere, but what kind of CSS would cause such behavior, what to look for?</p> <p>Here's the CSS as seen by firebug:</p> <pre><code>textarea { overflow: auto; resize: vertical; vertical-align: top; } button, input, select, textarea { font-size: 100%; margin: 0; } html, button, input, select, textarea { color: #222222; font-family: sans-serif; } </code></pre> <p>Thanks for any replies!</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload