How to set the width and height of the text box in css

青灯夜游
Release: 2023-01-04 09:38:52
Original
12792 people have browsed it

You can use the width and height attributes in css to set the width and height of the text box. You only need to add the "width: value;" and "height: value;" styles to the text box element (input or textarea). Can. The width attribute sets the width of the element, and the height attribute sets the height of the element.

How to set the width and height of the text box in css

The operating environment of this tutorial: Windows7 system, css1&&html5 version, Dell G3 computer.

Tutorial recommendation: css video tutorial

css method of setting the width and height of the text box

Give the text box element ( ,

The width attribute sets the width of the element, and the height attribute sets the height of the element.

How to set the width and height of the text box in cssHow to set the width and height of the text box in css

Note: The width and height attributes do not include padding, borders, or margins!

Example:

<!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>
Copy after login

Rendering:

How to set the width and height of the text box in css

##For more programming related knowledge, please visit:

programmingcourse! !

The above is the detailed content of How to set the width and height of the text box in css. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template