Underline single letter in an input placeholder

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