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

文章目录

  • 一、取消文本域拖拽
  • 二、文本域拖拽示例
  • 三、取消文本域拖拽示例





一、取消文本域拖拽



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>

文本域默认样式 :
【CSS】更改用户界面样式 ③ ( 取消文本域拖拽 | 代码示例 )_第1张图片
拖拽文本域 :

【CSS】更改用户界面样式 ③ ( 取消文本域拖拽 | 代码示例 )_第2张图片
选中文本域 , 外层有一条黑色轮廓线 ;

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





三、取消文本域拖拽示例



设置

			/* 取消拖拽文本域 */
			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>

执行结果 :

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

你可能感兴趣的:(CSS,css,前端,html,文本域拖拽,取消文本域拖拽)