CSS3魔法堂 禁止使用者改變textarea大小

一、前言

在ff、chrome和safari下預設時允許使用者以拖拽形式來改變textarea大小，這不僅與ie下textarea的行為特點有異，而且textarea的大小變化會撐大其父節點從而破壞整體布局。

二、原因

通過呼叫 window.getcomputedstyle(textarea元素, null).resize 返回both，我們可以知道原來是resize樣式屬性搞的鬼。

三、css3屬性──resize

用於設定useragent調整元素尺寸的機制，就是說設定使用者能否和如何自行改變元素尺寸。

值範圍

none：不允許useragent調整元素尺寸;

both：允許useragent調整元素水平、垂直方向的尺寸;

vertical：允許useragent調整元素垂直方向的尺寸;

horizontal：允許useragent調整元素水平方向的尺寸;

inherit：繼承父元素

對於div來說resize屬性值時inherit（其實就是none），而對於textarea而言預設值為both。

四、解決辦法

為textarea設定 resize: none

如果您覺得本文的內容有趣就掃一下吧！捐贈互勉！

CSS3魔法堂 禁止使用者改變textarea大小

一 前言 在ff chrome和safari下預設時允許使用者以拖拽形式來改變textarea大小，這不僅與ie下textarea的行為特點有異，而且textarea的大小變化會撐大其父節點從而破壞整體布局。二 原因 通過呼叫 window.getcomputedstyle textarea元素,n...

CSS3魔法堂 背景漸變（Gradient）

一 前言 很久之前就了解過css3的線性漸變 linear gradient 這段時間決定進一步認知這一特性，以下筆記以便日後查閱。二 css3的各種背景漸變 1.線性漸變 示例 七彩虹 樣式屬性 linear gradient 起始角度,color stop,color stop color st...

CSS3使用者介面

使用者介面 css3 規範新增了 ui模組，該模組用來控制與使用者介面相關效果的呈現方式，詳細資料參閱 css3 ui css3對盒模型進行了改善，定義了 box sizing 屬性，該屬性能夠事先定義盒模型的尺寸解析方式，基本語法如下所示 box sizing content box border...