Underline single letter in an input placeholder - css

Question

One can apply CSS styling to a placeholder, such as for Firefox:
::-moz-placeholder { text-decoration: underline; }
However, what I would like to do is underline a single letter in a placeholder, for the purpose of hinting at a hotkey for the user to press (similar to Windows in file menus), such as making the F in First Name underlined below:
<input type='text' placeholder='First Name' />
Is there any way to do this?

Answer 1

I think you can achieve this with CSS only in google chrome. For example:
You can select the first letter of placeholder
::-webkit-input-placeholder::first-letter {
color: red;
text-decoration:underline;
}
Result:
The text-decoration does not render when set with :first-letter in Chrome (Version 39.0.2171.71). So we can achieve the underline with border-bottom.
::-webkit-input-placeholder::first-letter {
color: red;
border-bottom: 1px solid red;
}
Result:
UPDATE: text-decoration works fine on Chrome 41.0.2235.0 Canary.
Here is the DEMO: http://codepen.io/MizR/pen/myeJZe
Unfortunately, this solution doesn't work on Firefox. :(
Update 2: No longer works. :(

Answer 2

You can use an absolute-positioned u tag, being careful to use the same font and padding as the input.
You'll need to hide the u when the input has content:
document.getElementById('iFirstName').onkeyup= function() {
var u= document.getElementById('uFirstName');
u.style.display= this.value>'' ? 'none':'inline';
};
u {
position: absolute;
font: 10pt verdana;
padding: 4px;
}
input {
padding: 3px;
font: 10pt verdana;
border: 1px solid #ddd;
}
<u id="uFirstName">F</u>
<input id="iFirstName" type='text' placeholder='First Name' />

Answer 3

If you are comfortable using contenteditable instead of input, you can try:
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;
}