フォーカスを失うように CSS をスタイル設定する方法

CSS がフォーカスを失う

Web デザインでは、ユーザー インタラクション エクスペリエンスを向上させるためにいくつかのスタイルを追加することが必要になることがよくあります。 CSS は、さまざまな効果やアニメーションを実現できる非常に強力なツールです。 CSS には「フォーカス状態」(:focus) と呼ばれる状態があり、これはユーザーが現在要素を操作しており、要素が「フォーカスされている」ことを示します。マウスまたはキーボードを使用して要素を入力すると、その要素はフォーカスを取得し、要素から離れるとフォーカスを失います。では、フォーカスを失う CSS をどのようにスタイル設定すればよいでしょうか?

1. 一般的なロスト フォーカス スタイル

1. 境界線の色

フォーカス状態で、要素に境界線を追加します。要素がフォーカスを失った場合、この境界線を要素の背景色と同じ色にするか、要素がフォーカスを失ったことを示すために明るくします。

たとえば、次の CSS スタイルを入力要素に追加できます:

input:focus {
    outline: none;
    border: 2px solid #555;
}

input {
    outline: none;
    border: 2px solid #ccc;
}

ここでは、CSS のアウトライン プロパティとボーダー プロパティを使用してこれを実現します。入力要素にフォーカスがない場合、その境界線は灰色になり、入力要素にフォーカスがある場合、その境界線は黒になります。

ここで、デフォルトのフォーカス状態で点線のフレームをキャンセルするには、outline:none を使用することに注意してください。そうしないと、視覚的な干渉が発生します。

2. 背景色

要素がフォーカスを取得すると背景色を設定し、要素がフォーカスを失うと背景色を元の色に戻します。

たとえば、ユーザーが入力ボックスにコンテンツを入力すると、入力ボックスの背景色を変更できます。ユーザーがフォームを送信すると、入力ボックスの背景色を復元できます。

input:focus {
    background-color: #fff;
}

input {
    background-color: #f6f6f6;
}

3. フォントの色

要素がフォーカスを取得すると、テキストに別の色を設定し、要素がフォーカスを失うと、テキストの色を元の色に戻します。

たとえば、次の CSS スタイルを入力要素に追加できます:

input:focus {
    color: #333;
}

input {
    color: #666;
}

入力要素がフォーカスされると、そのテキストの色は黒に変わります。入力要素がフォーカスを失うと、テキストの色が元の灰色に戻ります。

2. 擬似クラスを使用して焦点の合っていないスタイルを実装する

一般的な焦点の合っていないスタイルをいくつか上で説明しましたが、実際、これらのスタイルはすべて CSS 擬似クラスを通じて実装されています。クラス。 CSS 疑似クラスは、要素自体を選択するのではなく、要素の特定の状態を選択する特別なセレクターのセットを指します。たとえば、:focus セレクターを使用して要素のフォーカス状態をスタイル設定し、:hover セレクターを使用して要素のホバー状態をスタイル設定できます。

疑似クラスは要素のさまざまな状態に応じてさまざまなスタイルを設定できるため、ロスト フォーカス スタイルの実装に非常に適しています。以下に、いくつかの一般的な疑似クラスとその使用法を示します:

1. :focus

この疑似クラス セレクターは、現在フォーカスされている要素を選択するために使用されます。ユーザーがクリックするか Tab キーを押して要素を入力すると、その要素にフォーカスが置かれ、 :focus スタイルがトリガーされます。

たとえば、次の CSS スタイルを入力要素に追加できます:

input:focus {
    outline: none;
    border: 2px solid #555;
}

input {
    outline: none;
    border: 2px solid #ccc;
}

2, :active

この疑似クラス セレクターは、現在クリックされているオブジェクトを選択するために使用されます。要素。ユーザーがマウスで要素をクリックすると、要素がアクティブになり、:active スタイルがトリガーされます。

たとえば、次の CSS スタイルをボタンに追加できます:

button:active {
    background-color: #f00;
}

button {
    background-color: #ccc;
}

ユーザーがボタンをクリックすると、ボタンの背景色が赤に変わります。

3.:visited

この疑似クラス セレクターは、訪問済みリンクの要素を選択するために使用されます。ユーザーがリンクをクリックすると、リンクが訪問された状態になり、:visited スタイルがトリガーされます。

たとえば、訪問したリンクに次の CSS スタイルを追加できます:

a:visited {
    color: #999;
}

ユーザーがこのリンクにアクセスすると、リンクの色が灰色になります。

3. 概要

CSS のフォーカス状態は非常に便利な状態であり、Web デザインでよく使用されます。フォーカス状態スタイルを要素に追加すると、ユーザーは現在どの要素と対話しているかをより直観的に認識できるようになり、対話エクスペリエンスが向上します。境界線の色、背景色、文字色のいずれであっても、CSS 疑似クラス セレクターを使用して、フォーカス スタイルを失うデザインを実現できます。これらのスキルをマスターすれば、あなたのWebデザインをより良いものにすることができると思います。

以上がフォーカスを失うように CSS をスタイル設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。