简单掌握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设置box-pack和box-align让div里面的元素垂直居中
Sep 01 HTML / CSS
使用CSS3美化HTML表单的技巧演示
May 17 HTML / CSS
CSS3为背景图设置遮罩并解决遮罩样式继承问题
Jun 22 HTML / CSS
html5 input元素新特性_动力节点Java学院整理
Jul 06 HTML / CSS
一张图片能隐含千言万语之隐藏你的程序代码
Dec 13 HTML / CSS
canvas 实现 github404动态效果的示例代码
Nov 15 HTML / CSS
canvas仿写贝塞尔曲线的示例代码
Dec 29 HTML / CSS
H5混合开发app如何升级的方法
Jan 10 HTML / CSS
详解Canvas 跨域脱坑实践
Nov 07 HTML / CSS
详解window.open被浏览器拦截的解决方案
Jul 18 HTML / CSS
详解移动端h5页面根据屏幕适配的四种方案
Apr 15 HTML / CSS
Html5 canvas画图白板踩坑
Jun 01 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 file_get_contents函数轻松采集html数据
2010/04/22 PHP
php备份数据库类分享
2015/04/14 PHP
PHP开发Apache服务器配置
2015/07/15 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
基于jquery的blockui插件显示弹出层
2011/04/14 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
5分钟理解JavaScript中this用法分享
2013/11/09 Javascript
jquery等待效果示例
2014/05/01 Javascript
jquery实现预览提交的表单代码分享
2014/05/21 Javascript
angular基于路由控制ui-router实现系统权限控制
2016/09/27 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
Canvas + JavaScript 制作图片粒子效果
2017/02/08 Javascript
JS实现异步上传压缩图片
2017/04/22 Javascript
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
2019/01/20 Javascript
vscode vue 文件模板的配置方法
2019/07/23 Javascript
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
p5.js绘制创意自画像
2019/11/04 Javascript
js实现录音上传功能
2019/11/22 Javascript
微信小程序选择图片控件
2021/01/19 Javascript
[01:02:09]Liquid vs TNC 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21
2020/07/19 DOTA
python添加模块搜索路径方法
2017/09/11 Python
Python cookbook(数据结构与算法)通过公共键对字典列表排序算法示例
2018/03/15 Python
基于Django URL传参 FORM表单传数据 get post的用法实例
2018/05/28 Python
pandas.cut具体使用总结
2019/06/24 Python
购买大码女装:Lane Bryant
2016/09/07 全球购物
Scotch Porter官方网站:男士美容产品
2020/08/31 全球购物
哈理工毕业生的求职信
2013/12/22 职场文书
大学社团活动总结
2014/04/26 职场文书
护理专业毕业生自荐信
2014/06/15 职场文书
2016年企业先进员工事迹材料
2016/02/25 职场文书
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS
Java elasticsearch安装以及部署教程
2021/06/28 Java/Android
Mysql中有关Datetime和Timestamp的使用总结
2021/12/06 MySQL
Java中Dijkstra(迪杰斯特拉)算法
2022/05/20 Java/Android