在输入占位符中加下划线的单个字母

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)时,文本修饰不会呈现.所以我们可以用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:不再有效.:(