CSS多行文本域可以用來設計含有多個文本輸入框的網頁,給用戶更好的輸入體驗。具體實現方法可以參考下面的代碼示例:
textarea { width: 100%; height: 100px; padding: 10px; font-size: 16px; line-height: 1.5; border-radius: 10px; border: 1px solid #ccc; }
在這個示例中,我們使用了<textarea>
標簽來創建文本輸入框,并對其進行樣式設計。
首先,我們設置了文本框的寬度為100%,讓其適應父容器的寬度;高度為100px,讓用戶能夠顯示多行文本;內邊距為10px,讓文字與輸入框之間有一定距離。
同時,我們還設置了字體大小為16px,行高為1.5倍,使得文本輸入框內的文字更容易閱讀。邊框的圓角半徑為10px,使得輸入框看起來更加圓潤。
最后,我們給輸入框設置了1px的實線邊框,顏色為#ccc,使得輸入框更加清晰可見。
除了上述的樣式設置,我們還可以在<textarea>
標簽的rows和cols屬性中設置文本框的行數和列數,例如:<textarea rows="4" cols="50"></textarea>
。
總的來說,CSS多行文本域是一種非常常見的前端設計技巧,它可以增強網頁的交互性和可用性,為用戶帶來更好的使用體驗。