css的resize属性

Css3中新增了resize缩放属性，这个属性可以应用到任意元素。目前只有Webkit内核的浏览器才支持这个css3属性，即Google chrome和Apple safari都支持。

如textarea标签中，Webkit内核的浏览器会默认resize的值为both，即用户可以调节元素的宽度和高度。如下图就是在Google chrome中的textarea的默认显示，textarea右下角有一个可以控制缩放的按钮。

一般情况下，textarea是被固定宽度和高度的，如果你不愿意让其任意缩放，你可以为textarea添加resize:none的css属性。这样就可以去除Webkit内核的浏览器的默认显示。

将textarea中resize的属性值设置成vertical，这个是允许用户只能调节高度，这样页面就不会变形了。

以下是resize属性的的各个取值:

none：用户不能操纵机制调节元素的尺寸；
both：用户可以调节元素的宽度和高度；
horizontal：用户可以调节元素的宽度；
vertical：让用户可以调节元素的高度；
inherit：默认继承。

 

比如：

  <textarea name="Remarks" rows="2" cols="20" id="Remarks" class="textBox" οnfοcus="this.className='textBoxOver';myfocus()"
                        οnblur="this.className='textBox';myblur();"

      style="height: 60px; width: 86%;max-height: 60px;max-width:420px; resize=none;">特殊要求请在这里中标明</textarea>