Underline a single letter in the input tab
You can apply CSS styling to the placeholder, for example for Firefox:
::-moz-placeholder { text-decoration: underline; }
However, what I would like to do is underline one letter in the placeholder to hint at a hotkey for the user to press (similar to Windows in the file menu), for example to do F
in First Name
underlined below:
<input type='text' placeholder='First Name' />
Is there a way to do this?
source to share
I think you can only achieve this with CSS in Google Chrome. For example:
You can select the first letter of the placeholder
::-webkit-input-placeholder::first-letter {
color: red;
text-decoration:underline;
}
Result:
Text decoration not showing when installing with: first mail in Chrome (version 39.0.2171.71). This way we can achieve an underline with border-bottom .
::-webkit-input-placeholder::first-letter {
color: red;
border-bottom: 1px solid red;
}
Result:
UPDATE: The text decoration works fine on Chrome 41.0.2235.0 Canary.
Here is a DEMO: http://codepen.io/MizR/pen/myeJZe
Unfortunately this solution doesn't work in Firefox. :(
Update 2: Doesn't work anymore. :(
source to share
You can use an u
absolute tag , being careful to use the same font and padding as input
.
You need to hide u
if it 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' />
source to share
If you're comfortable using contenteditable
instead of typing, 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;
}
source to share