如何使用 CSS 停用 textarea 的可調整大小屬性?
在 CSS 中,我們可以使用‘resize’ 屬性來調整網頁 textarea 框的大小。我們可以調整 textarea 框的高度和寬度。如果我們將 resize 值設定為 none,則 textarea 框將無法調整大小。
在某些情況下,如果我們希望限制使用者互動並控制輸入的佈局,則可能需要停用 HTML 中文字框區域的可調整大小功能。文字輸入的大小對於網頁或應用程式的設計和佈局也很重要。
在本文中,我們將建立一個 CSS 程式碼來停用文字區域的可調整大小屬性。
可調整大小和不可調整大小的 textarea 框的視覺化表示
語法
<textarea>…write something…</textarea>
此 textarea 元素在輸出中建立框,使用者可以在其中寫入內容。textarea 術語透過在固定字型大小內容納大量字元來定義。文字框可用於表示反饋或評論框。
使用的屬性
示例中使用的屬性如下:
color - 定義文字的顏色。
font-weight - 定義文字是細體還是粗體。
text-align - 定義文字的水平對齊方式。
overflow - 根據 overflow 屬性定義元素框的內容溢位。如果元素的內容太大而無法容納在定義的區域內,則此屬性指示是裁剪內容還是新增捲軸。
height - 定義 textarea 框的高度。
weight - 定義 textarea 框的寬度。
resize - 如果值設定為 both,它將調整 textarea 框的高度和寬度。如果值設定為 none,則它將不會調整 textarea 框的大小。
示例
在此示例中,我們將使用內部 CSS 來設計 h1 和 h3 元素。然後,藉助名為 resizable 的 id 類,它設定了 textarea 框的屬性。如果 resize 屬性將值設定為 none,則它將停用 textarea 框。
<!DOCTYPE html> <html> <title>Resize the textarea box</title> <head> <style> h1,h3{ color: darkgreen; font-weight: bold; text-align: center; } #resizable{ overflow: auto; height: 200px; weight: 220px; resize: none; } </style> </head> <body> <h1>Tutorialspoint</h1> <h3><mark>Disable the resizable property of CSS</mark></h3> <center> <textarea id="resizable">This is real time to learn the technical course</textarea> </center> </body> </html>
結論
我們在上面的輸出中看到,textarea 框的高度和寬度不可調整大小,因為我們在 resize 屬性中定義了 none 值。有時停用文字框是正確的,因為在構建網站時,提到的空間起著重要作用。