如何实现这一效果:专注

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获得此功能.在Chrome Devtools中,您可以右键单击检查器中的任何DOM元素,然后选择"强制元素状态" - >":focus"

旁注:从它的外观来看,该页面是建立在流行的UI框架Twitter Bootstrap之上的.