关闭高端浏览器中textarea的resize

mseed · 发表于 2012-4-5 14:48:46

在FF、chrome等一些比较高端的浏览器中，当我们写了HTML的textarea标签之后，会发现在输入框的右下角有一个可以拖动的箭头，通过拖拉就可以改变textarea的宽高。这玩意虽然好用，但有时候会破坏我们的最终希望得到的页面结构。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>关闭高端浏览器中textarea的resize</title>
<style type="text/css">
textarea {width:200px;height:100px;}
</style>
</head>
<body>
<textarea rows="4" cols="4">拖拉右下角的箭头部分，可以改变textarea的宽高哦</textarea>
</body>
</html>

复制代码

示意功能图片
要解决这个问题其实很简单，只要增加CSS属性中的resize就可以了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>关闭高端浏览器中textarea的resize</title>
<style type="text/css">
textarea {width:200px;height:100px;
resize:none;
}
</style>
</head>

<body>
<textarea rows="4" cols="4">拖拉右下角的箭头部分，可以改变textarea的宽高哦</textarea>
</body>
</html>

光明使者 · 发表于 2012-5-4 16:56:26

人生就是在学习

		自动登录	找回密码
密码			立即注册

[教程] 关闭高端浏览器中textarea的resize

本帖子中包含更多资源

评分

站长推荐 /1