如何实现这一效果：焦点

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; 
}