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

发布于 2024-11-27 20:43:52 字数 125 浏览 1 评论 0原文

我正在制作 html 表单,我想为其添加效果。

是否可以有发光效果?

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

I'm in the middle of making my html form, and I want to add effects on it.

Is it possible for <input name="" type="text" class="" /> to have a glow effect?

Would it also be possible for the submit button to have this effect as well?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

十秒萌定你 2024-12-04 20:43:52

这适用于类 Button

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

Per @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;
}

This Works for all inputs of class Button

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

Per @Imoda

This works for all inputs of type text

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

And to get it only on hover:

input[type='text']:hover {
  -moz-box-shadow: 0px 0px 4px #ffffff;
  -webkit-box-shadow: 0px 0px 4px #ffffff;
  box-shadow: 0px 0px 4px #ffffff;
}
江心雾 2024-12-04 20:43:52

您可以通过 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 即可。

You can create objects or artwork via Photoshop or Fireworks, then import that graphic into your development with your CSS file. Example:

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

Then in your HTML, just call that div on your button.

ゞ记忆︶ㄣ 2024-12-04 20:43:52

这将选择“文本”类型的输入。然后将 #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;
}

This will select your inputs that are the "text" type. Then change the #FFFFFF to whatever colour you wish. In theory this should work. If it doesn't, add inset directly after each colon. It's not an exact outer-glow replication, but I believe it'll suit your needs.


input[type='text'] {
  -moz-box-shadow: 0px 0px 4px #ffffff;
  -webkit-box-shadow: 0px 0px 4px #ffffff;
  box-shadow: 0px 0px 4px #ffffff;
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文