首頁 > web前端 > css教學 > 如何使用 CSS 停用可調整大小的文字區域?

如何使用 CSS 停用可調整大小的文字區域?

DDD
發布: 2025-01-03 07:55:38
原創
653 人瀏覽過

How Can I Disable Resizable Textareas Using CSS?

停用可調整大小的文字區域:綜合指南

使用者經常會遇到文字區域中的調整大小選項,允許修改其大小。然而,在某些情況下禁用此功能至關重要。本文提供了有關使用 CSS 停用文字區域的可調整大小屬性的詳細指南。

使用 CSS 停用調整大小

要停用頁面上所有文字區域的調整大小,請套用下列 CSS規則:

textarea {
  resize: none;
}
登入後複製

選擇性停用

要只停用特定文字區域的大小調整,請使用下列選項:

  • 類別屬性:為目標分配一個類別文字區域並應用CSS規則:

    .textarea1 {
    resize: none;
    }
    登入後複製
  • 名稱屬性: 將規則應用於具有特定名稱屬性的文字區域:

    textarea[name=foo] {
    resize: none;
    }
    登入後複製
  • ID 屬性: 停用特定文字區域的大小調整ID屬性:

    #foo {
    resize: none;
    }
    登入後複製

其他選項

W3C 定義了用於進一步控制調整大小的附加價值:

    W3C 定義了用於進一步控制調整大小的附加價值:
  • 無:
  • 停用所有調整大小
  • 兩者:
  • 允許水平和垂直調整大小
  • 水平:
  • 僅為允許水平調整大小
  • 垂直:
  • 允許垂直調整大小only
  • inherit:
繼承父元素的調整大小行為

textarea {
  resize: vertical;
}
登入後複製
例如,僅允許垂直調整大小:

重要注意事項

請注意只有當溢位屬性設定為預設值visible以外的值時,resize屬性才會生效。通常,您需要指定溢位:捲動;

結論

透過以下方法,可以有效停用textarea的resizing屬性,增強使用者體驗,滿足特定的版面需求。

以上是如何使用 CSS 停用可調整大小的文字區域?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板