:focus

CSS偽類:focus表示獲得焦點的元素（如表單輸入）。當用戶點擊或觸摸元素或通過鍵盤的tab鍵選擇它時會被觸發。此偽類僅適用于焦點元素本身。如果要選擇包含焦點元素的元素，請使用:focus-within。

語法:

E:focus{sRules}

設置對象在成為輸入焦點（該對象的onfocus事件發生）時的樣式。

• webkit內核瀏覽器會默認給:focus狀態的元素加上outline的樣式。
• CSS偽類:focus表示獲得焦點的元素（如表單輸入）。當用戶點擊或觸摸元素或通過鍵盤的tab鍵選擇它時會被觸發。

瀏覽器支持

所有瀏覽器都支持:focus

例子

/* selects any when focused */input:focus {color: red;}

提示：此偽類僅適用于焦點元素本身。如果要選擇包含焦點元素的元素，請使用:focus-within。

//HTML //CSS.red-input:focus {background: yellow;color: red;}.blue-input:focus {background: yellow;color: blue;}.demo2 .red-input:focus{background: yellow; color: red;}.demo2 .blue-input:focus{background: yellow; color: blue;}