css怎么设置文本框的宽和高

青灯夜游 原创: 2023-01-04 09:38:52 10336浏览

css中可以使用width和height属性来设置文本框的宽和高，只需要给文本框元素（input或textarea）添加“width:值;”和“height:值;”样式即可。width属性可设置元素的宽度，height属性以设置元素的高度。

本教程操作环境：Windows7系统、css1&&html5版本、Dell G3电脑。

教程推荐：css视频教程

css设置文本框宽度和高度的方法

给文本框元素（<input>、<textarea>）设置width属性和height属性就可以调整文本框的宽和高。

width属性设置元素的宽度，height属性设置元素的高度。

注意： width属性和height属性不包括填充，边框，或页边距！

示例：

<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			.input{
				width: 200px;
				height: 100px;
			}
			.textarea{
				idth: 200px;
				height: 100px;
			}
		</style>
	</head>
 
	<body>
		<input type="text" placeholder="默认单行文本框" />
		<input type="text" class="input" placeholder="设置宽度200px，高度100px" /><br /><br />
		<textarea placeholder="默认多行文本框"></textarea>
		<textarea class="textarea" placeholder="设置宽度200px，高度100px"></textarea>
	</body>
 
</html>

效果图：