やったこと

textareaにの親要素にdivをつくる。
親div内にtextareaとdivをつくる。
textareaのwidthを95%くらいに設定する。
（もっといいやり方がある気がする）

demo

HTML

textarea.html

<!DOCTYPE html>
<head>
</head>
<body>
    <div>
        <p>textareaのスクロールバーを少し左に寄せる</p>
    </div>
    <div class="wrapper">
        <textarea class="wrapper__left">
        1
        2
        3
        4
        5
        </textarea>
        <div class="wrapper__right"></div>
    </div>
</body>

CSS

textarea.css

.wrapper {
    width: 16em;
    height: 4em;
    border: solid 1px; /* wrapperクラスでtextareaぽく演出する */
    display: flex;     /* .wrapper__leftとwrapper_rightは横並びにする */
}
.wrapper > .wrapper__left {
    width: 95%;
    border: none;               /* textareaのborderは表示しない */
    padding: calc(0.5em - 2px); /* .wrapperのborderのpxを引く */
    overflow-y: scroll;         /* 縦方向にスクロールさせる */
    resize: none;               /* 右下に出る拡張するやつを表示しない */
}
.wrapper > .wrapper__right {
    width: 5%;
}

もっといい書き方がある気がする。
CSS難しいぜ。

[HTML] [CSS] textareaのスクロールバーを少し左に寄せる

やったこと

demo

HTML

CSS