Question

将光标放在文本框中时，在文本框周围创建发光效果。例如：只需将光标放在stackoverflow.com中的搜索文本框中。

它因为css，但我不知道如何实现它..请帮助我。

Answer 1

box-shadow属性不是轮廓，而是实现任何文本字段的非常流畅，美观的效果：

field {
    border-color: #dbdbdb;
}

field:focus { /* When you click on the field... */
    border-color: #6EA2DE;
    box-shadow: 0px 0px 10px #6EA2DE;
}

这是一个JSFiddle Demo我曾经让自己显示上面的代码并带有过渡淡化效果。

Answer 2

虽然您在stackoverflow搜索框中观察到的效果可能是浏览器特定的（例如Google Chrome），但有一种方法可以使用CSS :focus伪类实现您想要的效果：

#foo:focus { border: 2px solid red; }

<input id="foo" type="text"/>

Answer 3

概要属性

http://www.w3schools.com/css/pr_outline.asp

如果您希望在单击文本框时显示它：

input:focus { outline: /* whatever */ }

IE7不支持：焦点选择器，但你可以使用jQuery：

$("input").focus(function () {
     $(this).css('outline','yellow solid thin');
});

Answer 4

显然IE7不支持大纲，即使我怀疑它会“发光”。您需要使用自定义背景图像或其他内容执行此操作。这里有一个例子：

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_24084560.html

顺便说一句：你说的是“边框颜色”。边框不是轮廓。你可以使用：

<input onfocus="this.style.border='2px solid yellow'">

您可以使用CSS：focus伪类，但IE6 / 7可能不支持它。

Answer 5

代码 -

input[type=text], textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}

input[type=text]:focus, textarea:focus {
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(81, 203, 238, 1);
}

演示 - http://www.labshab.com/submit-guest-posts/

Answer 6

如果您正在使用引导程序，则可以使用

class="form-control"

在活动时围绕文本框创建发光效果

6 个答案: