CSSでのフォーカスセレクターの用途は何ですか-CSSチュートリアル-php.cn

CSSでのフォーカスセレクターの用途は何ですか

青灯夜游

リリース： 2018-12-04 11:03:39

オリジナル

4449 人が閲覧しました

この記事では、css :focus セレクターの用途について紹介します。使い方？以下、具体的な内容を見ていきましょう。

CSSでのフォーカスセレクターの用途は何ですか

css :フォーカスセレクターの簡単な紹介

:フォーカスは疑似クラスの選択ですcss のハンドラーを使用して、フォーカスされた要素を選択し、これらのフォーカスされた要素のスタイルを設定できます。

キーボードイベントまたはその他のユーザー入力を受け取ることができる要素である限り、:focus セレクターはリンクおよびフォーム要素で使用できます。

例: ユーザーが入力ボックスをクリックしてフォーカスを取得すると、入力ボックスの境界線のスタイルが変更され、他の入力ボックスと区別され、その入力ボックスが選択されていることを示します。

通常の状況では、フォーム要素がフォーカスを取得すると、ブラウザによって要素の周囲にアウトラインが自動的に追加されます。ブラウザによって追加されたスタイルは、各ブラウザのデフォルトスタイルであり、通常は各ブラウザのデフォルトスタイルのように見えます。違う。ただし、ページ全体の美しさとブラウザーのスタイルの互換性を維持するために、多くの場合、要素にフォーカスが当たったときに要素のスタイルを変更し、デフォルトのスタイルを独自のスタイルに置き換える必要があります。

CSSでのフォーカスセレクターの用途は何ですか

現時点では、css :focus セレクターを使用して、ブラウザーがフォーカスを取得したときに要素のデフォルトのスタイルを設定できます。例:

input:focus{
    outline:0; /* 去除浏览器默认样式 */
    border: 2px solid pink;
}

ログイン後にコピー

レンダリング:

CSSでのフォーカスセレクターの用途は何ですか

説明: アウトラインは境界線に似ていますが、まったく同じではありません。アウトラインプロパティを渡してそのスタイルを設定します。例: アウトラインを削除するには、outline:0 を設定します。

リンクで css :focus セレクターを使用することもできます。例:

a:focus {    
   outline: 0;    
   color：red;
}

ログイン後にコピー

注:

css :focus 選択を使用するときセレクターを使用してスタイルをリンクする場合は、:link および :visited セレクターによって設定されたスタイルの後に :focus スタイルを設定することをお勧めします。そうしないと、:focus セレクターによって提供されるスタイルが、:link によって提供されるスタイルによって上書きされます。および :visited セレクター。

これらの 3 つの疑似クラスに加えて、:hover および :active 疑似クラスも、リンクスタイルの設定に使用できます。これらの疑似クラスが提供するスタイルは、:focus スタイルの後に表示されます。

各疑似クラスのスタイルが必要に応じて適用され、別の疑似クラスによって使用されないようにするには、上記の順序 (リンク、訪問済み、フォーカス、ホバー、アクティブ) が推奨されます。クラススタイルのオーバーライド。例:

a:link {
    color: #0099cc;
}
 
a:visited {
    color: grey;
}
 
a:focus {
    background-color: black;
    color: white;
}
 
a:hover {
    border-bottom: 1px solid #0099cc;
}
 
a:active {
    background-color: #0099cc;
    color: white;
}

ログイン後にコピー

css :focus セレクターの例:

フォーカスされた入力フィールドとテキストエリアフィールドの背景色が、明るい黄色の強調表示に変換されます。薄い赤の枠線で表示されます。

html コード:

<div class="container">
  <div class="form">
    <input type="text" placeholder="背景会变黄">
    <input type="text" placeholder="得到一个红色的边框">
    <textarea name="area" id="area" cols="30" rows="10">聚焦这里,textarea文本框</textarea>
    <button>按钮</button>
  </div>
</div>

ログイン後にコピー

css コード

.container {
  margin: 40px auto;
  max-width: 400px;
}
input,
textarea,
button {
  padding: .5em;
  display: block;
  width: 100%;
  margin-bottom: .5em;
}
a:link {
  color: deepPink;
}
/* :focus styles */
a:focus,
input:focus,
textarea:focus,
button:focus {
  /* override default browser outline */
 
  outline: 0;
  /* apply other styles */
 
  outline: 2px solid #F47E58;
  border-radius: 5px;
}
 
input:focus,
textarea:focus {
  background-color: #FFFF66;
}