使用方法:フォーム要素のスタイルを変更するための疑似クラス セレクターのフォーカス
はじめに:
私たちの Web デザインでは、フォーム要素は次のとおりです。共通のインタラクティブ コンポーネントを使用すると、ユーザーはフォーム要素を通じて Web ページと対話できます。ユーザー エクスペリエンスとインターフェイスの美しさを向上させるために、ユーザーがフォーム要素を操作するときにフォーム要素のスタイルを変更する必要があることがよくあります。この記事では、:focus 疑似クラス セレクターを使用してフォーム要素のスタイルを変更する方法と、具体的なコード例を紹介します。
1. :focus 疑似クラス セレクターとは何ですか?
:focus は CSS3 の疑似クラス セレクターで、現在フォーカスがある要素を選択するために使用されます。ユーザーがクリックするか、Tab キーを使用してフォーカスを切り替えると、:focus 疑似クラス セレクターが有効になります。 :focus 疑似クラス セレクターを使用すると、フォーム要素に現在フォーカスがあるかどうかを反映するために、フォーム要素のスタイルを変更できます。
2. 使用方法: フォーカス疑似クラス セレクター?
ここでは、いくつかの一般的なフォーム要素とその用途を示します: フォーカス疑似クラス セレクター:
- 入力要素:
input:focus {
/* 设置表单元素获取焦点时的样式 */
}- textarea 要素:
textarea:focus {
/* 设置表单元素获取焦点时的样式 */
}- select 要素:
select:focus {
/* 设置表单元素获取焦点时的样式 */
}3. コード例:
次に、具体的なコード例を示します。 :focus 疑似クラス セレクターを使用してフォーム要素のスタイルを変更する方法。
- フォーム入力ボックスがフォーカスを取得すると、境界線の色を変更します:
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text]:focus {
border: 2px solid blue;
}
</style>
</head>
<body>
<form>
<label for="name">用户名：</label>
<input type="text" id="name" name="name"><br><br>
<label for="password">密码：</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>上記のコードでは、入力ボックスがフォーカスを取得すると、その境界線の色が次のように変わります。青。
- フォーム ドロップダウン ボックスがフォーカスを取得すると、背景色を変更します:
<!DOCTYPE html>
<html>
<head>
<style>
select:focus {
background-color: yellow;
}
</style>
</head>
<body>
<form>
<label for="gender">性别：</label>
<select id="gender" name="gender">
<option value="male">男</option>
<option value="female">女</option>
<option value="other">其他</option>
</select><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>上記のコードでは、ドロップダウン ボックスがフォーカスを取得すると、背景色が変更されます。色が黄色に変わります。
概要:
:focus 疑似クラス セレクターを使用すると、フォーム要素のさまざまな状態にスタイルを設定して、視覚化効果とインターフェイス インタラクションのユーザー エクスペリエンスを向上させることができます。同時に、読者の参考のために具体的なコード例も提供します。この記事が読者の :focus 疑似クラス セレクターの理解と適用に役立つことを願っています。
以上が:focus 疑似クラス セレクターを使用してフォーム要素のスタイルを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
カーソルの次のレベルCSSスタイリングApr 23, 2025 am 11:04 AMCSSを備えたカスタムカーソルは素晴らしいですが、JavaScriptを使用して次のレベルに物事を引き出すことができます。 JavaScriptを使用して、カーソル状態間で移行し、カーソル内に動的テキストを配置し、複雑なアニメーションを適用し、フィルターを適用できます。
Worlds Collide：スタイルクエリを使用したキーフレーム衝突検出Apr 23, 2025 am 10:42 AM2025年には、互いに互いに跳ね返る要素を伴うインタラクティブなCSSアニメーションは、CSSにPongを実装する必要はありませんが、CSSの柔軟性とパワーの増加はLee＆＃039;の疑いを補強します。
UI効果にCSSバックドロップフィルターを使用しますApr 23, 2025 am 10:20 AMCSSバックドロップフィルタープロパティを使用してユーザーインターフェイスをスタイルするためのヒントとコツ。バックドロップフィルターを複数の要素間でレイヤー化する方法を学び、それらを他のCSSグラフィカル効果と統合して、精巧なデザインを作成します。
微笑んでいますか？Apr 23, 2025 am 09:57 AMまあ、SVG＆＃039;の組み込みのアニメーション機能は、計画どおりに非推奨されることはありませんでした。確かに、CSSとJavaScriptは負荷を運ぶことができる以上のものですが、以前のようにSmilが水中で死んでいないことを知っておくのは良いことです
「かわいい」は見る人の目にありますApr 23, 2025 am 09:40 AMイェーイ、テキストワラップのジャンプを見てみましょう：サファリテクノロジーのプレビューにかなり着陸してください！しかし、それがChromiumブラウザーでの仕組みとは異なることに注意してください。
CSS-Tricks XLIIIを記録しますApr 23, 2025 am 09:35 AMこのCSS-Tricksアップデートは、アルマナック、最近のポッドキャスト出演、新しいCSSカウンターガイド、および貴重なコンテンツを提供するいくつかの新しい著者の追加の大幅な進歩を強調しています。
Tailwind＆＃039;の@Apply機能は、響きよりも優れていますApr 23, 2025 am 09:23 AMほとんどの場合、人々はTailwind＆＃039;の@Apply機能を紹介します。このように展示されたとき、@Applyはまったく有望な音をしません。だからobvio
私はリリースがないように感じます：正気な展開への旅Apr 23, 2025 am 09:19 AM馬鹿のように展開することは、展開に使用するツールと複雑さの報酬と複雑さの減少との間の不一致になります。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!
ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。
AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター
ホットトピック
7698
15164014139352128725122929