cen cen - 4 months ago 34
HTML Question

Horizontal textarea scrollbar can't be grabbed in Chrome when border-radius is applied

https://jsfiddle.net/h4myo11L/4/

<textarea wrap="off" rows="5" style="border-radius: 4px">aaaaaaaaaaa
aaaaaaaaaaa
aaaaaaaaaaa
aaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbb
aaaaaaaaaaa
aaaaaaaaaaa
aaaaaaaaaaa
aaaaaaaaaaa
aaaaaaaaaaa
aaaaaaaaaaabbbbbbbbb
aaaaaaaaaaabbbbbbbbb
aaaaaaaaaaabbbbbbbbb
</textarea>



  1. Scroll to the middle of textbox

  2. Try to grab horizontal scrollbar with a mouse

  3. You can't, it is a text cursor and it blinks behind the bar!



Remove border-radius style and repeat: now you can grab the horizontal scrollbar. It also starts working once you scroll to the very bottom.

Works fine in Firefox. I use wrap attribute instead of CSS because it's the only cross-browser compatible way including IE11 (HTML Textarea horizontal scroll). Using CSS resulted in return key being pressed in IE11 to produce a space instead of newline.

Is there any way to fix this in Chrome?

edit: Bug fixed in Chrome 52

Answer

OPTION 1:

I have faced the exact same problem before and I have come up with a solution which is not the most professional one, but does the job for me.

First of all, wrap your textarea inside a div and set for your div the following properties:

div {
    border: 1px solid rgb(169,169,169);  /* The default color for the textearea's border */
    border-radius: 4px;                /* The border-radius you had on the text area */
    overflow: hidden;                /* To prevent the textarea's edges from overflowing */
    display: inline-block;       /* To ensure the div's border wraps around the textarea */
}

Then, remove the border from the textarea and set vertical-align: top to get rid of that sort of padding-bottom that exists in elements with display: inline-block. Like so:

textarea {
    vertical-align: top; /* To remove the small gap that exists in inline-block elements */
    border: 0;    /* To remove the border from the textarea */
}

As I said at the beginning, I don't consider this a very professional approach and alternative to this bug, but the result is visually identical to the textarea in your fiddle. However, use it with caution as it's likely that it may behave unexpectedly in some situations.

Working fiddle:here.

Snippet:

div {
  border: 1px solid rgb(169, 169, 169);
  border-radius: 4px;
  overflow: none;
  display: inline-block;
}

textarea {
  vertical-align: top;
  overflow-x: visible;
  border: 0;
}
<div>
  <textarea wrap="off" rows="5">aaaaaaaaaaa
    aaaaaaaaaaa
    aaaaaaaaaaa
    aaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbb
    aaaaaaaaaaa
    aaaaaaaaaaa
    aaaaaaaaaaa
    aaaaaaaaaaa
    aaaaaaaaaaa
    aaaaaaaaaaabbbbbbbbb
    IT'S 2016 AND I CANT EVEN HAVE A HORIZONTAL SCROLLBAR ON A TEXTBOX.
  </textarea>
</div>


OPTION 2:

After some tests, I found that, for some reason, setting position: relative to the textarea seems to solve the issue as well, at least in my version of Chrome, but in case you want to use another type of positioning, the above will do the job.