发光蓝色输入高亮 | CSS-Tricks

就像2012年中期的 Twitter。

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

查看 CodePen 上 Chris Coyier (@chriscoyier) 编写的发光蓝色输入

BrianC

# 2012年4月11日

很棒，但想知道 HTML 中的“tabindex=1”是什么意思？我猜它与键盘上的 Tab 键有关，但找不到任何相关信息。

Chris Burnell

评论永久链接# 2012年4月12日

Tabindex 定义了元素在页面 Tab 键顺序中的位置（0 – 32767）——这可能是为使用屏幕阅读器的人设计的。
Hugo

评论永久链接# 2012年4月12日

如果没错的话，tabindex 用于控制通过 Tab 键进行的键盘导航。
tabindex=”1″ 表示它是按下 Tab 键时第一个获得焦点的元素。然后，您将转到流中的下一个元素，或者如果存在的话，转到 tabindex=”2″。

我个人不使用 tabindex，因为常规流已经隐含了它，但是当您有一些棘手的导航，比如两行输入（仅举例子）时，您可能希望焦点首先转到底部或其他位置。

我想我唯一使用 tabindex 的情况是用于一个未显示的输入字段，用于识别垃圾邮件机器人：我将其设置为 tabindex=”-1″ 以防止一些奇怪的行为。

顺便说一句，Chris，非常棒的发光焦点样式。;)
Robbie

评论永久链接# 2014年1月7日

这是用于手动指定表单元素的顺序。浏览器和屏幕阅读器会根据源代码中的顺序自动对其进行排序。指定 tabindex 将覆盖该 Tab 键顺序行为。
Ryan Hemphill

评论永久链接# 2014年6月28日

Tabindex 是辅助功能的重要特性，不应该避免使用。无意冒犯。如果您正在考虑使用 tabindex，那么最好的实现是使用 tabindex=”0″ 和 tabindex=”-1″。0 值将确保您的 Tab 键行为遵循 DOM 流，因此无需担心任何奇怪的事情。-1 避免键盘 Tab 键导航，同时仍然保持其可聚焦性，例如使用鼠标时会发生的情况。

我还想提一下，那些必须设置表单的人应该注意 tabindex 顺序（有些人称之为焦点管理），因为它可以确保您的用户在尝试遍历界面时不会感到沮丧。通常，您不应该在该表单中使用排序系统，因此我建议不要使用 tabindex=”1″，而应坚持确保 DOM 流反映 tabindex=”0″ 方法。

顺便说一句，这种发光效果非常好。不像我看到的一些示例那样过于夸张。
deepu

评论永久链接# 2015年7月25日

处理表单时，Tab 索引很有用。如果将所有输入设置为相同的索引，那么它将依次聚焦下一个，默认情况下它在 HTML 中存在。因此，只有在需要时才使用它。
Athul

评论永久链接# 2016年12月19日

:) :) :) :)

Andru Stoicescu

# 2012年4月23日

嗨，Chris，

我喜欢使用 box shadow 和 transition 属性来创建这种效果。
但是，在 select 标签上，这种效果并不像在输入或文本区域上那样容易实现。您将如何使用跨浏览器兼容性来应用类似的效果——当然，我说的是支持 CSS3 的浏览器。

谢谢！

Yoram Global

# 2012年5月10日

从未见过 :focus 这个东西。它是 CSS3 特性还是更早的版本？

julien

评论永久链接# 2013年10月7日

在希伯来语中，Yoram 的意思是“白痴”，在这里非常贴切
troy

评论永久链接# 2013年11月15日

白痴是 Julien，而不是 Yoram。
Aeroflare

评论永久链接# 2014年9月16日

它是 CSS2
bezinga

评论永久链接# 2016年8月4日

:focus 用于当您点击某些内容时它会产生效果。因此，当您在 :focus 中放置一种颜色时，一旦您点击它，它将变成该颜色。

Lee Marshall

# 2012年5月15日

非常棒的简单效果。

我见过它，但从未想过它是如何工作的。

事实证明非常简单。

这让我开始思考输入和使用颜色来指示我想要网站用户执行的操作。潜意识的指示。

Namanyay Goel

# 2012年5月20日

我只是不明白一件事。为什么使用 RGBA？简单的十六进制代码不是更容易吗？它是否提供了一些额外的益处？

Joel

评论永久链接# 2014年6月2日

不透明度。

Muhib

# 2012年6月20日

这是否支持 IE 9 或更高版本？

Msuth

# 2012年6月26日

有没有办法将其添加到某些表单输入中？

我尝试将其添加到我正在制作的一个 WordPress 网站中，以包含在联系表单内。问题在于它将其添加到所有其他输入中（例如我的搜索框）。

我尝试为它们指定类名，例如 blueform 和 blueform focus，但它仍然会选择它们。

谢谢，

msuth

Msuth

评论永久链接# 2012年6月26日

只想补充一点，它在多行文本框中按原样工作，但在单行文本框中不工作

adam

# 2013年1月14日

您似乎忘记了针对旧版浏览器获得焦点的回退。


input[type=text], textarea {
  @include transition (all .30s ease-in-out); /*scss mixin */
  outline: none;
  border: 1px solid #DDDDDD;
}
 
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, textarea:focus {
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  border: 1px solid #5ee3ff;
  border: 1px solid rgba(81, 203, 238, 1);
}

Chris

评论永久链接# 2017年6月29日

或者他根本不在乎使用 100 年前浏览器的用户，我发现这更专业。为什么专业开发人员要支持满是安全漏洞的过时浏览器，让用户认为停留在该旧版本是可以的？

Arun

# 2013年10月14日

感谢分享！有没有办法将其应用于选择字段？它在 Firefox 中有效，但在 Safari 中无效

Byron

# 2013年11月10日

我不确定这是否正是人们在将此 CSS 应用于选择字段方面所追求的，但原始代码（[type=text]）将该块应用于具有文本属性的任何输入元素。如果您只在要影响的那些字段上放置特定的类/ID，则可以调用该类/ID 而不是“input[type=text]”。只需查找并替换即可。

我从未遇到过执行此操作仍然将该块应用于所有输入字段的情况，但如果有人遇到这种情况，我想为“input[type=text]”指定一个块，为您的特定字段指定另一个块可能会解决问题？

Lucas

# 2013年11月17日

我不想这么说，但请尝试调整文本区域的大小。

Valjean

评论永久链接# 2014年2月7日

抓住了要点。“transition: all”失效时… :)

Brian

# 2014年6月27日

这应该可以解决调整大小问题

input[type=text], textarea {
  -moz-transition-property: -moz-box-shadow, border;
  -o-transition-property: -o-box-shadow, border;
  -webkit-transition-property: -webkit-box-shadow, border;
  transition-property: box-shadow, border;

  @include transition-duration(250ms);
  @include transition-timing-function(ease-in-out);

  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}

Anton

# 2014年1月28日

这工作得很好，但是如果我使用图像，如何删除提交按钮周围的边框？

Brian

# 2014年8月7日

如果有人感兴趣，我为此创建了一个 mixin。如果您没有使用 Compass，只需替换 @include transition() 即可。

@mixin input-glow($glow-color, $border-color) { // Gives a glow effect around text inputs
    @include transition(all 0.4s ease-in-out 0s); // Glow appears slowly
    border: 1px solid $border-color; // Set "invisible" border so field width doesn't change when clicked
    padding: 3px;
    outline: none; // Remove Chrome's default input style

    &:focus { // Glow when input field is clicked
        box-shadow: 0px 0px 5px $glow-color;
        border: 1px solid $glow-color;
    }

    &:hover { // Glow when input field is hovered over
        box-shadow: 0px 0px 5px $glow-color;
        border: 1px solid $glow-color;
    }
}

Gary Jones

# 2014年9月25日

我非常想要实现这个效果！我已经尝试了所有方法，但它就是不起作用。我使用了完全相同的 CSS 和 HTML 代码，但当我检查字段的代码时，看到的只有“#textarea”，没有任何格式。在像“name”这样的普通字段上，我什么也看不到。表单位于 http://www.prismcareernetworks.com/?page_id=325。非常感谢任何帮助。我需要设计三个复杂的表单。

Gary Jones

# 2014年9月25日

我的天啊，我终于搞明白了。我用了一个“（”右括号而不是“}”右括号。总是那些小细节。

Dennis

# 2014年11月24日

试试用hotpink。很烂。

Rom

# 2014年12月4日

酷！我想知道这个“â€‹”是从哪里来的。当我加载代码时，它出现在浏览器中。

Md. Anowar Hossain

# 2016年12月19日

这非常有用。

Rahul R Menon

# 2020年5月26日

感谢这个。我一直在到处寻找这个。我想在选择标签上实现它。谁能帮我一下？

评论

发表评论 取消回复

发表评论取消回复