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 即可,不需要兩個都寫上去,當然,不嫌麻煩的話,兩個都寫也是可以的。

相關主題研究
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012