Home/ Questions/Q 8533821
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T10:03:14+00:00

I have a super simple HTML form: <form name=editor action=# method=POST> <textarea name=contents cols=100

  • 0

I have a super simple HTML form:

<form name="editor" action="#" method="POST">
    <textarea name="contents" cols="100" rows="50"><?php echo $text; ?></textarea>
    <br>
    <input type="submit" name="submit" value="Submit" />
</form>

Text echoed inside it is HTML code.

Now, when CSS is turned off, it works perfectly.

But when it’s turned on, I:

  • can’t click anywhere inside the textarea text to place the cursor there
  • 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.

What have I tried:

  • Excluding the textarea from CSS firebug showed applied to it
  • Trying with or without JS to check if that makes a difference
  • Tried different browsers, same issue repeats
  • Turning off CSS completely and then it works, but it’s not an option

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?

Here’s the CSS as seen by firebug:

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;
}

Thanks for any replies!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Thanks everyone! You actually helped me by setting this fiddle, I started pasting part by part of CSS there, and here’s what caused the issue, if anyone gets into same problem:

    body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    Basically disabled text selection was obviously inherited from body.

    Thanks everyone again.

    PS. Also to clarify to anyone who suspected that my code inside textarea was unescaped – yes it was, but that doesn’t seem to be a problem, you obviously can do that.

    • 0