css - 在输入占位符中为单个字母下划线

Question

可以将 CSS 样式应用于占位符，例如 Firefox:

::-moz-placeholder { text-decoration: underline; }

但是，我想做的是在占位符中加下划线，以提示用户按下热键(类似于文件菜单中的 Windows)，例如制作 F 在 First Name 中，下划线:

<input type='text' placeholder='First Name' />

有什么办法吗？

Answer 1

我认为您只能在谷歌浏览器中使用 CSS 来实现这一点。例如:

可以选择占位符的首字母

::-webkit-input-placeholder::first-letter {
  color: red;
  text-decoration:underline; 
}

结果:

在 Chrome(版本 39.0.2171.71)中使用 :first-letter 设置时，文本装饰不会呈现。所以我们可以用border-bottom来实现下划线。

::-webkit-input-placeholder::first-letter {
  color: red;
  border-bottom: 1px solid red;
}

结果:

更新:文本装饰在 Chrome 41.0.2235.0 Canary 上运行良好。

这是演示:http://codepen.io/MizR/pen/myeJZe

不幸的是，此解决方案不适用于 Firefox。 :(

更新 2: 不再有效。 :(