CSS3魔法堂:禁止用户改变textarea大小-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

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 :继承父元素

 

在FF、Chrome和Safari下

对于div来说resize属性值时inherit(其实就是none),而对于textarea而言默认值为both。

 

四、解决办法                        

  为textarea设置 resize: none

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章