突出顯示文本框點擊時藍色

確定一些像Twitter等網站，當你點擊textbot登錄時突出顯示爲藍色。我該怎麼做呢？突出顯示文本框點擊時藍色

來源

2012-05-18 user1394913

-2

將CSS應用於文本框，如border-color:blue;對click或focus事件。

來源

2012-05-18 23:18:21 Kumar

爲什麼選擇JavaScript而不是純CSS？ – Helgi

那麼如果是twitter，你可以看看bootstrap.css代碼。我想下面的CSS會做的伎倆（把它從bootstrap.css）：

input:focus, textarea:focus { 
    border-color: rgba(82, 168, 236, 0.8); 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); 
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); 
    outline: 0; 
    outline: thin dotted \9; 
    /* IE6-9 */ 

}

參考：CSS的

http://twitter.github.com/bootstrap/

來源

2012-05-18 23:19:30 skub

相關位來自Twitter

textarea { 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    outline: none; 
} 

textarea:focus { 
    border-color: #56B4EF; 
    box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 0 8px rgba(82,168,236,.6); 
    -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 0 8px rgba(82,168,236,.6); 
}

來源

2012-05-18 23:21:06

檢查jsfiddle。您可以通過更換＃56B4EF

input:focus { 
outline: none; 
box-shadow: 0px 0px 7px #56B4EF; 
border-color: #56B4EF;

來源

2012-06-20 01:06:58 Andrew

突出顯示文本框點擊時藍色

回答

相關問題