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

Question

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

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

但是，我想要做的是在占位符中用单个字母加下划线，以便暗示用户按下的热键（类似于文件菜单中的Windows），例如制作{{1} } F下面标有以下内容：

First Name

有没有办法做到这一点？

Answer 1

我认为你只能在Google Chrome中使用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;
}

<强>结果：

更新： text-decoration在Chrome 41.0.2235.0 Canary上正常运行。

以下是DEMO：http://codepen.io/MizR/pen/myeJZe

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

更新2：不再有效。 :(

Answer 2

您可以使用绝对定位的u代码，小心使用与input相同的字体和填充。

当u有内容时，您需要隐藏input：

＆＃13;

＆＃13;

document.getElementById('iFirstName').onkeyup= function() {
  var u= document.getElementById('uFirstName');
  u.style.display= this.value>'' ? 'none':'inline';
};

＆＃13;

u {
  position: absolute;
  font: 10pt verdana;
  padding: 4px;
}

input {
  padding: 3px;
  font: 10pt verdana;
  border: 1px solid #ddd;
}

＆＃13;

<u id="uFirstName">F</u>
<input id="iFirstName" type='text' placeholder='First Name' />

＆＃13;

＆＃13;

＆＃13;

Answer 3

如果您习惯使用contenteditable代替输入，可以尝试：

http://jsfiddle.net/lotusgodkk/GCu2D/473/

HTML：

<div contenteditable="true" data-ph="First Name">Hello</div>

CSS：

div {/*For styling div similar to input*/
    width:300px;
    height:24px;
    border:1px solid grey;
}
div[contentEditable=true]:empty:not(:focus):before {
    content:attr(data-ph);
    color:grey;    
}
div::first-letter {
    text-decoration:underline;
}