首页  >  文章  >  web前端  >  css怎么设置文本框的宽和高

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

青灯夜游
青灯夜游原创
2021-01-06 11:18:2812814浏览

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

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

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

教程推荐:css视频教程

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

给文本框元素(d5fd7aea971a85678ba271703566ebfd、4750256ae76b6b9d804861d8f69e79d3)设置width属性和height属性就可以调整文本框的宽和高。

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

3.png2.png

注意: 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>

效果图:

1.png

更多编程相关知识,请访问:编程课程!!

以上是css怎么设置文本框的宽和高的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn