CSSテキストボックスの設定

May 27, 2023 am 11:37 AM

インターネット技術の継続的な発展に伴い、Web デザインも多くの変更と更新を受けてきました。テキスト ボックスは Web デザインで最もよく使用される要素の 1 つであり、その設定は Web サイトの外観に影響を与えるだけでなく、Web サイトのユーザー エクスペリエンスや使いやすさにも影響します。この記事では、テキストボックスの基本的なスタイル、背景色、角丸、影、透明度、アニメーション効果など、CSSテキストボックスの設定方法を紹介します。

1. テキスト ボックスの基本スタイル

テキスト ボックスは、Web デザインで最も広く使用されている要素の 1 つで、検索ボックスやメッセージなど、さまざまな情報を入力できます。 .ボックスやコメントボックスなど。 CSS では、次のコードを使用してテキスト ボックスの基本スタイルを定義できます:

input[type=text], textarea {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  font-size: 16px;
  resize: none;
}
ログイン後にコピー

上記の CSS コードでは、input[type=text] セレクターと textarea セレクターを使用してテキスト ボックスを定義します。基本的なスタイル。具体的なスタイルには、幅、パディング、余白、境界線、境界線の色、境界線の角の丸い、背景色、フォント サイズ、テキスト ボックスのサイズ変更が含まれます。

2. テキストボックスの背景色

テキストボックスの背景色は、CSSのbackground-colorプロパティを通じて設定できます。さまざまなデザインのニーズに合わせて、テキスト ボックスの背景色をカスタマイズできます。以下は、テキスト ボックスの背景色としてダーク グレーを使用した例です:

input[type=text], textarea {
  background-color: #333;
}
ログイン後にコピー

3. テキスト ボックスの丸い境界線

丸い境界線は、一般的に使用されるテキスト ボックスのデザイン スタイルです。 . ページをより暖かく親しみやすいものにすることができます。 CSS では、border-radius プロパティを使用して、テキスト ボックスの境界線の丸みを帯びたサイズを設定できます。以下は例です:

input[type=text], textarea {
  border-radius: 10px;
}
ログイン後にコピー

4. テキスト ボックスの影

影により、ページ要素がより立体的でリアルに見えるようになります。 box-shadow プロパティを使用して、テキスト ボックスの影効果を設定できます。以下は例です。

input[type=text], textarea {
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}
ログイン後にコピー

このうち、最初のパラメータは影の水平オフセットを表し、2 番目のパラメータは垂直オフセットを表し、3 番目のパラメータはぼかし半径を表し、4 番目のパラメータは影を表します。色と透明感。

5. テキスト ボックスの透明度

透明度は要素の不透明度を指し、opacity 属性を使用してテキスト ボックスで透明度を使用できます。以下に例を示します。

input[type=text], textarea {
  opacity: 0.7;
}
ログイン後にコピー

6. テキスト ボックスのアニメーション効果

アニメーション効果により、Web ページの要素がより目を引き、ユーザー エクスペリエンスが向上します。 CSS トランジション プロパティを使用して、テキスト ボックスをアニメーション化できます。以下に例を示します。

input[type=text], textarea {
  transition: all 0.3s ease-in-out;
}
input[type=text]:hover, textarea:hover {
  transform: scale(1.05);
}
ログイン後にコピー

上記のコードは、マウスをホバーしたときにテキスト ボックスに拡大効果を追加します。コードの最初の行はすべてのプロパティのトランジション効果を設定し、コードの 2 行目は拡大効果を追加します。

概要:

テキスト ボックスは Web デザインでよく使用される要素です。CSS を使用してテキスト ボックスのスタイルを設定することで、テキスト ボックスをより美しくし、ユーザー エクスペリエンスと Web サイトの使いやすさを向上させることができます。ここで提供されるサンプル コードは、読者の参考として使用でき、さまざまな設計ニーズに合わせてカスタマイズすることもできます。

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

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

UseEffectとは何ですか?副作用を実行するためにどのように使用しますか? UseEffectとは何ですか?副作用を実行するためにどのように使用しますか? Mar 19, 2025 pm 03:58 PM

UseEffectとは何ですか?副作用を実行するためにどのように使用しますか?

怠zyなロードの概念を説明してください。 怠zyなロードの概念を説明してください。 Mar 13, 2025 pm 07:47 PM

怠zyなロードの概念を説明してください。

JavaScriptでカリーはどのように機能し、その利点は何ですか? JavaScriptでカリーはどのように機能し、その利点は何ですか? Mar 18, 2025 pm 01:45 PM

JavaScriptでカリーはどのように機能し、その利点は何ですか?

JavaScriptの高次関数とは何ですか?また、より簡潔で再利用可能なコードを書くためにどのように使用できますか? JavaScriptの高次関数とは何ですか?また、より簡潔で再利用可能なコードを書くためにどのように使用できますか? Mar 18, 2025 pm 01:44 PM

JavaScriptの高次関数とは何ですか?また、より簡潔で再利用可能なコードを書くためにどのように使用できますか?

React和解アルゴリズムはどのように機能しますか? React和解アルゴリズムはどのように機能しますか? Mar 18, 2025 pm 01:58 PM

React和解アルゴリズムはどのように機能しますか?

usecontextとは何ですか?コンポーネント間で状態を共有するためにどのように使用しますか? usecontextとは何ですか?コンポーネント間で状態を共有するためにどのように使用しますか? Mar 19, 2025 pm 03:59 PM

usecontextとは何ですか?コンポーネント間で状態を共有するためにどのように使用しますか?

イベントハンドラーのデフォルトの動作をどのように防止しますか? イベントハンドラーのデフォルトの動作をどのように防止しますか? Mar 19, 2025 pm 04:10 PM

イベントハンドラーのデフォルトの動作をどのように防止しますか?

制御されたコンポーネントと制御されていないコンポーネントの利点と短所は何ですか? 制御されたコンポーネントと制御されていないコンポーネントの利点と短所は何ですか? Mar 19, 2025 pm 04:16 PM

制御されたコンポーネントと制御されていないコンポーネントの利点と短所は何ですか?

See all articles