简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > フロントエンドQ&A > 本文

CSSでテキストボックスのサイズを設定する方法

藏色散人
リリース： 2023-01-05 16:12:42
オリジナル
9700 人が閲覧しました

CSS でテキスト ボックスのサイズを設定する方法: 最初に新しい HTML ファイルを作成し、次に input タグを使用してテキスト型のテキスト ボックスを作成し、最後に width 属性と height 属性を使用して入力の幅と高さ。

CSSでテキストボックスのサイズを設定する方法

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

test.html という名前の新しい HTML ファイルを作成し、CSS を使用してテキスト ボックスのサイズと入力単語の最大数を設定する方法を説明します。

CSSでテキストボックスのサイズを設定する方法

test.html ファイルで、input タグを使用してテキスト型のテキスト ボックスを作成し、そのデフォルト値を空に設定します。

CSSでテキストボックスのサイズを設定する方法

test.html ファイルで、maxlength 属性を使用して入力ボックスを最大 10 単語に設定します。

CSSでテキストボックスのサイズを設定する方法

test.html ファイルに、 タグを記述します。ページの CSS スタイルは次のようになります。ラベル内にこう書いてあります。

CSSでテキストボックスのサイズを設定する方法

css タグでは、名前を使用して入力要素の CSS スタイルを設定し、width 属性を使用して入力の幅を 300px に設定し、高さを使用します。属性を使用して入力の高さを 30px に設定します。

CSSでテキストボックスのサイズを設定する方法

ブラウザで test.html ファイルを開いて効果を確認します。

CSSでテキストボックスのサイズを設定する方法

HTML/CSS の詳しい知識については、

CSS ビデオ チュートリアル 列をご覧ください。

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

関連ラベル：
css
ソース：php.cn
前の記事：HTMLのタグの下線を消す方法 次の記事：CSSで自動とは何を意味しますか
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1335
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
Javafx でインライン CSS スタイルを動的に変更する アプリケーションが最大化されているときにペインの背景画像を変更しようとしています。私の背景はインライン CSS を使用して設定されています。スタイル用に 2 つの異なる変数と if...
から 2024-04-06 20:57:16
0
1
487
CSS でフローティング要素を水平ではなく垂直にスタックするにはどうすればよいですか? 片側にメインコンテンツ、もう一方に追加コンテンツがある 2 つの列を持つ Web ページを作成しようとしています。ただし、float プロパティを使用して追加の列を左に揃えているた...
から 2024-04-06 20:45:26
0
2
386
他の CSS コードに関係なく、フレックスボックス内のテキストを強制的に垂直方向の中央に配置する方法はありますか? 開発中の Web サイトで使用されている大規模な CSS コードの一部である次の CSS コードがあります。 }.card-u{margin:20px;padding:20px;w...
から 2024-04-06 20:41:51
0
1
518
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！