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:
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>
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.