提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

【CSS】更改用户界面样式 ③ ( 取消文本域拖拽 | 代码示例 )

CSS代码 示例 文本 更改 样式 取消 拖拽
2023-06-13 09:18:50 时间

一、取消文本域拖拽

textarea 文本域 在 默认状态下是可以进行拖拽的 ,

在网页布局中 , 一般不会允许这种情况发生 , 任意拖拽文本域会影响网页的整体布局 ;

设置文本域不可拖拽样式 :

resize: none;

文本域不可拖拽内嵌式样式完整示例 :

<textarea style="resize: none;"></textarea>

二、文本域拖拽示例

在下面的示例中 , 拖拽文本域 , 使得文本域下方的内容位置发生了改变 ;

代码示例 :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>取消文本域拖拽示例</title>
</head>
<body>
	<textarea>文本域是可拖拽的</textarea>
	<br>
	文本域下方的内容
</body>
</html>

文本域默认样式 :

拖拽文本域 :

选中文本域 , 外层有一条黑色轮廓线 ;

三、取消文本域拖拽示例

设置

			/* 取消拖拽文本域 */
			resize: none;

样式 , 可以取消文本域拖拽功能 ;

代码示例 :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>取消文本域拖拽示例</title>
	<style>
		textarea {
			/* 取消轮廓线 */
			outline: none;
			/* 取消拖拽文本域 */
			resize: none;
		}
	</style>
</head>
<body>
	<textarea>文本域是可拖拽的</textarea>
	<br>
	文本域下方的内容
</body>
</html>

执行结果 :

相关文章