为输入框和按钮添加发光效果答案

【问题标题】：Adding Glow Effect to Input Boxes and Buttons为输入框和按钮添加发光效果
【发布时间】：2011-10-19 05:06:59
【问题描述】：

我正在制作我的 html 表单，我想在上面添加效果。

<input name="" type="text" class="" />可以有发光效果吗？

提交按钮是否也可以具有这种效果？

【问题讨论】：

“发光效果”是什么意思？将鼠标悬停在元素上时更改边框颜色？
可能重复：stackoverflow.com/questions/6422790/…
@Veger：是的，类似的。当用户单击或开始输入文本时，框会发光，类似于 Photoshop 中的外发光。
@js1568：这与您链接的问题不同。 :)

标签： html css forms input glow

【解决方案1】：

这适用于按钮类的所有输入

input.Button {
-moz-box-shadow: 0px 0px 10px Green;
-webkit-box-shadow: 0px 0px 10px Green;
box-shadow: 0px 0px 10px Green;
}

每@Imoda

这适用于所有文本类型的输入

input[type='text'] {
  -moz-box-shadow: 0px 0px 4px #ffffff;
  -webkit-box-shadow: 0px 0px 4px #ffffff;
  box-shadow: 0px 0px 4px #ffffff;
}

并且只在悬停时获得它：

input[type='text']:hover {
  -moz-box-shadow: 0px 0px 4px #ffffff;
  -webkit-box-shadow: 0px 0px 4px #ffffff;
  box-shadow: 0px 0px 4px #ffffff;
}

【讨论】：

你用的是什么浏览器？它在现代浏览器中运行良好。
@Mae Guff 尝试使用 input[type="text"] { ... } 作为您的选择器。

【解决方案2】：

您可以通过 Photoshop 或 Fireworks 创建对象或图稿，然后使用您的 CSS 文件将该图形导入您的开发中。示例：

div#btn {
background-position: top right;
position:absolute; */
margin:0px 0px; padding:0px;
text-align:center;
background-image: url(images/bg1.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
}

然后在您的 HTML 中，只需在您的按钮上调用该 div。

【讨论】：

感谢您的回复。我想这可以应用于按钮，但我喜欢有这种发光效果。我的意思是，当用户悬停或开始输入时，输入框会发光:)

【解决方案3】：

这将选择“文本”类型的输入。然后将#FFFFFF 更改为您想要的任何颜色。理论上这应该有效。如果没有，请在每个冒号后直接添加inset。这不是精确的 outer-glow 复制，但我相信它会满足您的需求。


input[type='text'] {
  -moz-box-shadow: 0px 0px 4px #ffffff;
  -webkit-box-shadow: 0px 0px 4px #ffffff;
  box-shadow: 0px 0px 4px #ffffff;
}

【讨论】：