CSS は Web ページのスタイルを設定するために使用される言語で、Web ページ上でさまざまな効果を実現するのに役立ちます。 Web 開発では、フォームは非常に一般的な要素であり、入力はフォームの最も基本的なコントロールの 1 つです。この記事では、CSS を使用して入力要素のスタイルを設定する方法について説明します。
1. 入力ボックスのスタイル
CSS を使用して、入力ボックスの幅と高さを簡単に設定できます。次のように、width 属性と height 属性を使用して入力ボックスのサイズを設定できます:
input[type="text"] {
width: 200px;
height: 30px;
}
境界線は、入力ボックスのスタイルで最もよく使用される要素の 1 つです。 border プロパティを使用して、入力ボックスの境界線のスタイルを設定できます。
たとえば、次のコードは、入力ボックスの境界線を実線、幅 1 ピクセル、灰色に設定します。
境界線 : 1px 実線 #aaa;}
境界線を非表示に設定して、入力ボックスに境界線を持たないようにすることもできます。
input[type= "text" ] {
border: none;}
input[type="text"] {
border-radius: 5px; box -shadow: 0 0 5px rgba(0,0,0,0.5);
}
input[type="text"] {
font-size: 16px; color: #333;
background-color: #f2f2f2;
}
2. ラジオ ボタンとチェック ボックスのスタイル
テキスト入力ボックスに加えて、ラジオ ボタンとチェック ボックスもフォームでよく使用される要素です。 CSS を通じてそれらを美しくし、より良いユーザー エクスペリエンスを実現できます。
外観の変更まず、ラジオ ボタンとチェックボックスの外観を変更するには、次の CSS ルールを追加する必要があります:
input[type="radio"], input[type="checkbox"] {
-webkit-Appearance: なし; -moz-Appearance: なし;
外観: なし;
境界線: 1 ピクセルの実線 #ccc;
境界線の半径: 50%;
幅: 16px;
高さ: 16px;
アウトライン: なし;
トランジション: すべて 0.3 秒イーズインアウト;
}
このコードはブラウザーのデフォルトのラジオを非表示にしますボタンとチェックボックスのスタイルを円形に変更します。
次のコードは、ラジオ ボタンとチェック ボックスにいくつかの簡単なアニメーション効果を設定します。
input[type="radio"]:checked, input[type="checkbox" ]:checked {
背景色: #000; 境界線色: #000;
遷移: すべて 0.3 秒イーズインアウト;
}
このコードは、単純なラジオボタンやチェックボックスを選択すると、背景色や枠線の色が変わります。
3. ボタンのスタイル
ボタンは、フォームで最もよく使用される要素の 1 つです。デフォルトのボタン スタイルは非常に古風に見えることがよくありますが、CSS を使用すると、ボタンの色、フォント、サイズ、その他の属性を簡単に変更できます。
ボタンの色button {
Background: Linear-gradient(#3180b8, #1e68a2); border: none;
ボーダー半径: 3px;
カラー: #fff;
カーソル: ポインタ;
フォントサイズ: 16px;
パディング: 8px 16px;
トランジション: すべて 0.3 秒イーズ;
}
button:hover {
}
Web 開発では、フォーム要素が非常に一般的です。これらの要素のスタイルは、CSS を使用して簡単に変更して、よりモダンで美しく見せることができます。この記事では、CSS を使用して入力要素のスタイルを設定する方法について説明します。フォームを作成するとき、この記事で説明する方法を使用して、ニーズや好みに応じてフォーム要素の外観をカスタマイズできます。
以上がCSS を使用して入力要素のスタイルを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
