我有這樣的代碼狀態：懸停 - 活躍 - 集中

Question

input[type="email"]:hover { 
    border-color: #848484; 
} 

input[type="email"]:active { 
    border-color: #0174DF; 
} 

input[type="email"]:focus { 
    border-color: #0174DF; 
} 

我想打一個input像一個在谷歌搜索，當光標在輸入（不關注）邊框的顏色變暗（I」我已經做了這個:hover），當我點擊輸入現在變成藍色，但只是當我釋放點擊顏色返回到:hover狀態，我該如何解決這個問題？

Answer 1

這是解決方案：

input[type="email"] { 
    outline: none; 
    background-color: white; 
    border: solid #A4A4A4; 

} 

input[type="email"]:hover { 
    border-color: #939393; 
} 

input[type="email"]:focus { 
    border-color: #0080FF; 
} 

有在google.com