ホームページ > ウェブフロントエンド > CSSチュートリアル > CSSでテキストボックスの幅と高さを設定する方法

CSSでテキストボックスの幅と高さを設定する方法

青灯夜游
リリース: 2023-01-04 09:38:52
オリジナル
12849 人が閲覧しました

CSS の width 属性と height 属性を使用して、テキスト ボックスの幅と高さを設定できます。テキストに「width: value;」スタイルと「height: value;」スタイルを追加するだけです。 box 要素 (入力またはテキストエリア)。 width 属性は要素の幅を設定し、height 属性は要素の高さを設定します。

CSSでテキストボックスの幅と高さを設定する方法

このチュートリアルの動作環境: Windows7 システム、css1&&html5 バージョン、Dell G3 コンピューター。

チュートリアルの推奨事項: css ビデオ チュートリアル

テキスト ボックスの幅と高さを設定する CSS メソッド

テキスト ボックス要素 (

width 属性は要素の幅を設定し、height 属性は要素の高さを設定します。

CSSでテキストボックスの幅と高さを設定する方法CSSでテキストボックスの幅と高さを設定する方法

注: 幅と高さの属性には、パディング、境界線、またはマージンは含まれません。

例:

<!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>
ログイン後にコピー

レンダリング:

CSSでテキストボックスの幅と高さを設定する方法

##プログラミング関連の知識の詳細については、こちらをご覧ください:

programmingcourse ! !

以上がCSSでテキストボックスの幅と高さを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート