简单掌握CSS3中resize属性的用法


Posted in HTML / CSS onApril 01, 2016

CSS3新增了resize属性,该属性允许用户通过拖动的方式来修改元素的尺寸。本来resize应该翻译为缩放,但在实际测试中通过resize属性只可以在宽高基础上实现拉伸效果,而无法实现缩放到小于宽高的效果。

[注意]IE浏览器不支持resize属性。

resize与overflow关系紧密,只有当元素的overflow属性值不是visible时,resize才会起作用

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

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

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

[注意]因为文本框本身就具有overflow:auto的属性,所以自带resize属性

值: none | both | horizontal | vertical

初始值: none

应用于: 块级元素、替换元素、表单元格

继承性: 无

none: 用户无法调整元素尺寸
both: 用户可调整元素的宽度和高度
horizontal: 用户只可调整元素的宽度

比如:

CSS Code复制内容到剪贴板
  1. <textarea name="Remarks" rows="2" cols="20" id="Remarks" class="textBox" onfocus="this.className='textBoxOver';myfocus()"  
  2.                       onblur="this.className='textBox';myblur();"  
  3.   
  4.     style="height: 60px; width: 86%;max-height: 60px;max-width:420px; resize=none;">特殊要求请在这里中标明</textarea>  

<textarea name="Remarks" rows="2" cols="20" id="Remarks" class="textBox" onfocus="this.className='textBoxOver';myfocus()"
onblur="this.className='textBox';myblur();"

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

HTML / CSS 相关文章推荐
纯CSS3实现图片无间断轮播效果
Aug 25 HTML / CSS
css3高级选择器使用方法
Dec 02 HTML / CSS
CSS3中background-clip和background-origin的区别示例介绍
Mar 10 HTML / CSS
使用CSS3 制作一个material-design 风格登录界面实例
Dec 12 HTML / CSS
CSS3 新增选择器的实例
Nov 13 HTML / CSS
Html5 Canvas 实现一个“刮刮乐”游戏
Sep 05 HTML / CSS
html5实现的便签特效(实战分享)
Nov 29 HTML / CSS
Html5新增标签有哪些
Apr 13 HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
Apr 25 HTML / CSS
JavaScript+Canvas实现自定义画板的示例代码
May 13 HTML / CSS
深入理解CSS 中 transform matrix矩阵变换问题
Aug 30 HTML / CSS
CSS3制作炫酷的自定义发光文字
Mar 28 #HTML / CSS
可自定义箭头样式的CSS3气泡提示框
Mar 16 #HTML / CSS
6种非常炫酷的CSS3按钮边框动画特效
Mar 16 #HTML / CSS
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
Mar 16 #HTML / CSS
纯CSS3实现8组超炫酷鼠标滑过图片动画
Mar 16 #HTML / CSS
纯CSS3打造属于自己的“小黄人”
Mar 14 #HTML / CSS
利用css3-animation实现逐帧动画效果
Mar 10 #HTML / CSS
You might like
php获取某个目录大小的代码
2008/09/10 PHP
PHP中常用的输出函数总结
2014/09/22 PHP
PHP实现文件下载详解
2014/11/27 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
聊聊 PHP 8 新特性 Attributes
2020/08/19 PHP
单击按钮显示隐藏子菜单经典案例
2013/01/04 Javascript
JS加jquery简单实现标签元素的显示或隐藏
2013/09/23 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
浅析webapp框架AngularUI的demo
2014/12/21 Javascript
JavaScript修改浏览器tab标题小技巧
2015/01/06 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
简单谈谈关于 npm 5.0 的新坑
2017/06/08 Javascript
Vue2.2.0+新特性整理及注意事项
2018/08/22 Javascript
在React项目中使用Eslint代码检查工具及常见问题
2018/10/10 Javascript
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
JavaScript学习笔记之DOM操作实例分析
2019/01/08 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
[01:08]2014DOTA2展望TI 剑指西雅图LGD战队专访
2014/06/30 DOTA
Python自定义进程池实例分析【生产者、消费者模型问题】
2016/09/19 Python
200 行python 代码实现 2048 游戏
2018/01/12 Python
Python实现Linux监控的方法
2019/05/16 Python
python字符串格式化方式解析
2019/10/19 Python
用python拟合等角螺线的实现示例
2019/12/27 Python
Python3监控windows,linux系统的CPU、硬盘、内存使用率和各个端口的开启情况详细代码实例
2020/03/18 Python
基于PyQT实现区分左键双击和单击
2020/05/19 Python
Python自带的IDE在哪里
2020/07/01 Python
Python使用itcaht库实现微信自动收发消息功能
2020/07/13 Python
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
如何将整数int转换成字串String
2014/03/21 面试题
个人求职信范例
2014/01/29 职场文书
讲文明树新风公益广告宣传方案
2014/02/25 职场文书
交通工程专业推荐信
2014/09/06 职场文书
售后服务承诺函格式
2015/01/21 职场文书
小学2016年“我们的节日·重阳节”活动总结
2016/04/01 职场文书
php实现自动生成验证码的实例讲解
2021/11/17 PHP
SQLServer常见数学函数梳理总结
2022/08/05 MySQL