CSS overflow 隱藏 textarea 文字欄位的 scrollbar

原始的 textarea 文字輸入欄位預設為，當文字內容超過顯示區塊時，會自動出現 scrollbar，想要隱藏 scrollbar 可以使用 CSS overflow 屬性，這個屬性的功能是用來控制，當內容超過區塊的情況出現時的顯示方式，而且可以單獨設定 x 軸或 y 軸方向，也可以一次設定完成。

隱藏 textarea 文字欄位的 scrollbar 範例語法

<textarea style="width:200px;height:100px;border:2px #ccc solid;overflow:hidden;">
Welcome to Wibibi.have a good day.This is scrollbar hidden test.You can see this textarea have no scrollbar both in x direction and y direction.
</textarea>

我們透過 CSS 的樣式設定，將 HTML textarea 的寬度與高度分別設定為 200 像素與 100 像素，並使用了 CSS overflow 屬性來控制那串英文的文字內容，如果超過 textarea 的範圍，則隱藏 scrollbar。

範例顯示結果

由範例結果可以看到無論是 x 軸或 y 軸，都沒有顯示 scrollbar，範例語法中我們是直接使用 overflow:hidden 的寫法，這樣寫會讓水平方向與垂直方向的 scrollbar 同時隱藏起來，若要分別設定水平方向或垂直方向的 scrollbar 隱藏，可使用下方這兩個寫法。

設定水平方向隱藏 scrollbar 的寫法：overflow-x:hidden;
設定垂直方向隱藏 scrollbar 的寫法：overflow-y:hidden;

只要在 CSS 語法中，使用上面這兩個語法的其中一個，就可以單獨設定特定方向，如果一次兩邊都要隱藏，那就用 overflow:hidden 即可，不需要兩個都寫上去，當然，不嫌麻煩的話，兩個都寫也是可以的。

相關主題研究