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

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

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

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

【问题讨论】:

  • “发光效果”是什么意思?将鼠标悬停在元素上时更改边框颜色?
  • @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;
}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2017-03-14
    • 2010-11-30
    • 2011-06-20
    • 1970-01-01
    • 2014-04-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多