htmlcsstextareapadding

Textarea right padding when using a horizontal scrollbar?

When creating a textarea with a horizontal scrollbar, how to enable a padding on the right side? CSS padding works for the top right corner, but not for the right side:

enter image description here

textarea {
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: scroll;
  border: 1px solid black;
  height: 5rem;
  width: 14rem;
  padding: 0.75rem;
}
<textarea>foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar</textarea>

Solution

  • This seems to be a known bug (Issue #40572939) specifically for textarea and have been staying open without any fix for a while in Chromium. As quoted in the issue:

    This is due to the layout overflow calculation not including inline-end padding for block-level children, this may be fixed if we change our behaviour here.

    For now the only solution I know all involves changing the textarea to a contenteditable similar to what @spyder1329 posted.