本サイトはプロモーション（広告）が含まれています。

HTML

textareaのスクロールバーを縦のみまたは横のみで表示する方法

textareaのスクロールバーを縦のみまたは横のみで表示する方法

  EdgeやChromeのブラウザーで標準では文字数が超過しない限り、スクロールバーが表示されません。

　スクロールバーを最初から表示させたい場合や、スクロールバーを「縦のみ」または「横のみ」表示させる方法を紹介します。

デフォルトでの表示は以下となります。

<textarea>テスト</textarea>

↓↓表示結果↓↓

　スクロールバーを表示させるためには

  • 縦のみ ➡ style=”overflow-y:scroll;”
  • 横のみ ➡ style=”overflow-x:scroll;”
  • 全体 　➡ style=”overflow:scroll;”

を追加することで可能となります。

スクロールバーを縦のみ表示させる方法

　「style=”overflow-y:scroll;”」を追加することで縦のみスクロールバーが表示されます。

<textarea style="overflow-y:scroll;" >テスト</textarea>

↓↓表示結果↓↓

スクロールバーを横のみ表示させる方法

　「style=”overflow-x:scroll;”」を追加することで縦のみスクロールバーが表示されます。

<textarea style="overflow-x:scroll;" >テスト</textarea>

↓↓表示結果↓↓

 

スクロールバーを全体表示させる方法

　「style=”overflow:scroll;”」を追加することで縦横スクロールバーが表示されます。

<textarea style="overflow:scroll;" >テスト</textarea>

↓↓表示結果↓↓

 

HTML の記事一覧へ

PAGE TOP