1

我在一个网站上看到了这个：

在此处输入图像描述

然后，当你点击它... 在此处输入图像描述

你会如何重现这个？不仅仅是一个简单的实心边框，而是像那个一样。我扫描了源代码，但找不到任何东西。不在css或javascript中。

我得到这个的网站是： http: //www.minecraft-schematics.com/search/

我很确定这会产生:focus影响，但正如我所说，我在源代码中找不到它......

有任何想法吗？

4

3 回答 3

8

从您所指的页面上该特定元素的来源：

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

我通过 Chrome 通过强制元素进入焦点状态然后检查应用的 CSS 规则来实现这一点。在 Chrome Devtools 中，您可以右键单击检查器中的任何 DOM 元素，然后选择“Force element state”->“:focus”

旁注：从外观上看，该页面是基于流行的 UI 框架Twitter Bootstrap构建的。

于 2013-04-03T12:23:46.117 回答
3

看起来它是引导程序的一部分。

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);
}
于 2013-04-03T12:27:33.623 回答
1

文本框使用CSS3box-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;
}
于 2013-04-03T12:29:26.433 回答