下划线输入占位符中的单个字母答案

【问题标题】：Underline single letter in an input placeholder下划线输入占位符中的单个字母
【发布时间】：2015-01-28 09:02:24
【问题描述】：

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

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

但是，我想做的是在占位符中为单个字母加下划线，以提示用户按下热键（类似于文件菜单中的 Windows），例如将F 放入First Name 下划线：

<input type='text' placeholder='First Name' />

有什么办法吗？

【问题讨论】：

您似乎使用的是placeholder 属性而不是标签，这与使用它只是为了提供额外的提示相反。 HTML5 规范对此提出了强烈的警告。因此，请确保您正在解决正确的问题。
跟踪。我试图弄清楚什么是复杂的，这是一系列输入，需要下面显示的先前值和上面显示的验证错误，用于针对现有数据输入数据。在我可以使用占位符的情况下添加标签字段只会浪费。

标签： css placeholder underline

【解决方案1】：

我认为您只能在 google chrome 中使用 CSS 来实现这一点。例如：

可以选择占位符的首字母

::-webkit-input-placeholder::first-letter {
  color: red;
  text-decoration:underline; 
}

结果：

在 Chrome（版本 39.0.2171.71）中使用 :first-letter 设置时，文本装饰不会呈现。所以我们可以用border-bottom来实现下划线。

::-webkit-input-placeholder::first-letter {
  color: red;
  border-bottom: 1px solid red;
}

结果：

更新： text-decoration 在 Chrome 41.0.2235.0 Canary 上运行良好。

这里是演示：http://codepen.io/MizR/pen/myeJZe

很遗憾，此解决方案不适用于 Firefox。 :(

更新 2： 不再有效。 :(

【讨论】：

浏览器对样式占位符所做的任何事情都不是错误，因为没有规范说您应该能够对它们应用 CSS 或可能存在什么限制。
@JukkaK.Korpela 谢谢。知道了。更新。 :)
这似乎不再适用于任何当前的浏览器。在 Chome (52.0.2743.116 m) 和 IE 11 中失败。
是的，它不工作！无法在新更新的浏览器中呈现。
@MizanurRahman 是否可以在更新的浏览器中进行相同的更改。在新浏览器中获得相同的方式是什么。

【解决方案2】：

您可以使用绝对定位的u 标记，注意使用与input 相同的字体和填充。

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

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' />

【讨论】：

【解决方案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;
}

【讨论】：

意味着这在输入元素中是不可能的？