如何實現這一效果：焦點

Question

我看到這個網站上：

然後，當你點擊它...

你會如何重建呢？不只是一個簡單的固體邊界，但像那樣。我掃描了源代碼，但找不到任何東西。不在CSS中，或JavaScript。

我得到這個從該網站是： http://www.minecraft-schematics.com/search/

我敢肯定，這將是一個:focus影響，但我找不到它的源代碼，就像我說的...

任何想法？

Answer 1

從頁面上的特定元素的來源你參考：

input[type="text"]:focus { 
    border-color: rgba(82, 168, 236, 0.8); 
    outline: 0; 
    outline: thin dotted 9; 
    -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); 
} 

我得到這個通過瀏覽器通過強制元素成爲焦點狀態，然後檢查應用的CSS規則。在Chrome中Devtools您可以在任何DOM元素在檢查員單擊鼠標右鍵，然後選擇「強制元狀態」 - >「：聚焦」

旁註：從外觀上來看，該頁面是內置在流行的UI框架Twitter Bootstrap上。

Answer 2

看起來像是bootstrap的一部分。

jsFiddle

.fancy { 
    background-color: #fff; 
    border: 1px solid #ccc; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); 
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); 
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); 
    -webkit-transition: border linear .2s,box-shadow linear .2s; 
    -moz-transition: border linear .2s,box-shadow linear .2s; 
    -o-transition: border linear .2s,box-shadow linear .2s; 
    transition: border linear .2s,box-shadow linear .2s; 
    display: inline-block; 
    height: 20px; 
    padding: 4px 6px; 
    margin-bottom: 10px; 
    font-size: 14px; 
    line-height: 20px; 
    color: #555; 
    vertical-align: middle; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
} 
.fancy:focus { 
    border-color: rgba(82, 168, 236, 0.8); 
    outline: 0; 
    outline: thin dotted 9; 
    -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); 
} 

Answer 3

文本框使用CSS3 box-shadow。下面的CSS將把所有文本框的陰影效果放在焦點上：

input[type^="text"] { 
    background: #fff; 
    border: 1px solid #0077cc; 
    border-radius: 5px; 
    padding: .2em; 
    outline: none; /*Stops Chrome putting a yellow border on the textbox*/ 
} 
input[type^="text"]:focus { 
    box-shadow: 0px 0px 10px #0077cc; 
}