jquery - 单击蓝色时突出显示文本框

Question

好的，所以当您单击文本机器人登录时，某些网站（如 twitter 等）会突出显示为蓝色。我该怎么做呢？

Answer 1

好吧，如果是 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 */

}

参考：

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

Answer 2

来自 Twitter 的相关 CSS

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

Answer 3

检查这个jsfiddle。您可以通过替换 #56B4EF 来更改颜色

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

Answer 4

将 CSS 应用于文本框，例如border-color:blue;onclick或focusevent。