CSS はアクティブなコントロールのスタイルを設定します (フォーカス疑似クラスの実装)-CSSチュートリアル-php.cn

CSS はアクティブなコントロールのスタイルを設定します (フォーカス疑似クラスの実装)

不言

リリース： 2018-11-16 14:33:46

オリジナル

2153 人が閲覧しました

この記事では CSS アクティブコントロールのスタイルを紹介します。具体的な内容を見てみましょう。

まずは構文形式を見てみましょう:

:focus{
  (样式描述)
}

ログイン後にコピー

次のように要素、クラス、IDを指定して記述します。 tag

(标签名):focus{ 
  （样式描述）
}

ログイン後にコピー

特定のクラスを設定する場合

.(class名):focus{ 
  （样式描述）
}

ログイン後にコピー

特定のIDを設定する場合

#(id名):focus{ 
  （样式描述）
}

ログイン後にコピー

コード例:

以下のコードを記述します。

FocusSelector.css

input {
  background-color:#D0D0D0;
}
input:focus {
  background-color:#FFD0D0;
}

ログイン後にコピー

注:

「input」と記述しているため、INPUTタグのスタイルを定義し、背景色をグレーに指定しています。 (#D0D0D0)。通常の INPUT の定義は、

input {  background-color:#D0D0D0;}

ログイン後にコピー

が受け取ってフォーカスをアクティブにするスタイル定義で、背景色はピンク (#FFD0D0) に指定されています。

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

ログイン後にコピー

FocusSelector.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="ForcusSelector.css" />
</head>
<body>
    输入1 : <input type="text" /><br />
    输入2 : <input type="text" /><br />
    输入3 : <input type="text" /><br />
    输入4 : <input type="text" /><br />
    输入5 : <input type="text" /><br />
    </body>
    </html>

ログイン後にコピー

実行結果:

Webブラウザを使用して上記のHTMLを表示します。以下のような効果が表示されます。

CSS はアクティブなコントロールのスタイルを設定します (フォーカス疑似クラスの実装) #テキストボックスをクリックして入力状態に入ると、テキストボックスの背景色がピンク色に変わります。