今天小編給大家分享的是CSS設置主動控件的樣式的方法，很多人都不太了解，今天小編為了讓大家更加了解CSS設置主動控件的樣式的方法，所以給大家總結了以下內容，一起往下看吧。一定會有所收獲的哦。
我們先來看一下語法格式：
:focus{
(樣式描述)
}通過指定元素，類和ID來描述它，如下所示：
設置特定標簽時
(標簽名):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設置主動控件的樣式方法的簡略介紹，當然詳細使用上面的不同還得要大家自己使用過才領會。如果想了解更多，歡迎關注億速云行業資訊頻道哦！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
