CSS を使用して入力要素のスタイルを設定する方法

CSS は Web ページのスタイルを設定するために使用される言語で、Web ページ上でさまざまな効果を実現するのに役立ちます。 Web 開発では、フォームは非常に一般的な要素であり、入力はフォームの最も基本的なコントロールの 1 つです。この記事では、CSS を使用して入力要素のスタイルを設定する方法について説明します。

1. 入力ボックスのスタイル

1. 幅と高さ

CSS を使用して、入力ボックスの幅と高さを簡単に設定できます。次のように、width 属性と height 属性を使用して入力ボックスのサイズを設定できます:

input[type="text"] {
width: 200px;
height: 30px;
}

2. 境界線スタイル

境界線は、入力ボックスのスタイルで最もよく使用される要素の 1 つです。 border プロパティを使用して、入力ボックスの境界線のスタイルを設定できます。

たとえば、次のコードは、入力ボックスの境界線を実線、幅 1 ピクセル、灰色に設定します。

境界線 : 1px 実線 #aaa;

}

境界線を非表示に設定して、入力ボックスに境界線を持たないようにすることもできます。

input[type= "text" ] {

border: none;

}

角丸と影

3. CSS を使用して、角丸と影を設定することもできます。入力ボックスの。たとえば、次のコードは入力ボックスの角丸を 5 ピクセルに設定し、シャドウ効果を設定します。

input[type="text"] {

border-radius: 5px;

box -shadow: 0 0 5px rgba(0,0,0,0.5);
}

テキスト ボックス スタイル

4. テキスト ボックスをカスタマイズすることもできます。入力要素。たとえば、テキスト ボックスの背景色やフォント サイズ、入力したテキストの色を設定できます。以下に例を示します。

input[type="text"] {

font-size: 16px;

color: #333;
background-color: #f2f2f2;
}

2. ラジオ ボタンとチェック ボックスのスタイル

テキスト入力ボックスに加えて、ラジオ ボタンとチェック ボックスもフォームでよく使用される要素です。 CSS を通じてそれらを美しくし、より良いユーザー エクスペリエンスを実現できます。

外観の変更

1. ラジオ ボタンとチェック ボックスの外観は、通常、ブラウザのデフォルト スタイルで表示されます。ただし、CSS を使用すると、ニーズに合わせてこれらのコントロールを変更できます。

まず、ラジオ ボタンとチェックボックスの外観を変更するには、次の CSS ルールを追加する必要があります:

input[type="radio"], input[type="checkbox"] {

-webkit-Appearance: なし;

-moz-Appearance: なし;
外観: なし;
境界線: 1 ピクセルの実線 #ccc;
境界線の半径: 50%;
幅: 16px;
高さ: 16px;
アウトライン: なし;
トランジション: すべて 0.3 秒イーズインアウト;
}

このコードはブラウザーのデフォルトのラジオを非表示にしますボタンとチェックボックスのスタイルを円形に変更します。

色とアニメーション

2. 色とアニメーション効果を変更することで、ラジオ ボタンとチェック ボックスをさらに美しくすることもできます。

次のコードは、ラジオ ボタンとチェック ボックスにいくつかの簡単なアニメーション効果を設定します。

input[type="radio"]:checked, input[type="checkbox" ]:checked {

背景色: #000;

境界線色: #000;
遷移: すべて 0.3 秒イーズインアウト;
}

このコードは、単純なラジオボタンやチェックボックスを選択すると、背景色や枠線の色が変わります。

3. ボタンのスタイル

ボタンは、フォームで最もよく使用される要素の 1 つです。デフォルトのボタン スタイルは非常に古風に見えることがよくありますが、CSS を使用すると、ボタンの色、フォント、サイズ、その他の属性を簡単に変更できます。

ボタンの色

1. ボタンの背景色とフォントの色を変更することで、ボタンを美しくすることができます。次のコードは、ボタンがホバーされたときに背景色のグラデーション効果を追加します:

button {

Background: Linear-gradient(#3180b8, #1e68a2);

border: none;
ボーダー半径: 3px;
カラー: #fff;
カーソル: ポインタ;
フォントサイズ: 16px;
パディング: 8px 16px;
トランジション: すべて 0.3 秒イーズ;
}

button:hover {

背景:linear-gradient(#1e68a2, #3180b8);

}

ボタンのサイズとフォント

2. ボタンのサイズとフォントを変更して、よりモダンな外観にすることもできます。次のコードは、ボタンのテキスト サイズを大きくし、太字にします。

}

結論

Web 開発では、フォーム要素が非常に一般的です。これらの要素のスタイルは、CSS を使用して簡単に変更して、よりモダンで美しく見せることができます。この記事では、CSS を使用して入力要素のスタイルを設定する方法について説明します。フォームを作成するとき、この記事で説明する方法を使用して、ニーズや好みに応じてフォーム要素の外観をカスタマイズできます。

以上がCSS を使用して入力要素のスタイルを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。