下划线：CSS 选择的第一个字母

Question

我知道<select>使用 's 是出了名的痛苦，但我正在构建一个带有accesskey 的表单，并通知用户所述键，我在表单项的第一个字母下划线。

使用占位符这很容易，

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

段落自然轻松，

.field>p:first-letter{text-decoration:underline}

然而，我一生都无法弄清楚如何处理<select>。

我已经尝试了一些事情，我将在下面列出它们。

  /* attempt 1 */
  select:first-letter{}

  /* attempt 2 */
  select option:nth-child(1):first-letter{}

  /* attempt 3 */
  option[value="0"]:first-letter{}

  /* attempt 4 */
  select:before,
  option[value="0"]:before{
    content:'';
    position:absolute;
    left:0;
    bottom:3px;
    width:5px;
    height:1px;
    border-bottom:1px solid black;
  }

  /* attempt 5 */
  <option><u>N</u>ame</option>

  /* attempt 6 - kinda works, looks wonky */
  <option>&#x035F;Name</option>

我能够实现这一目标的唯一方法是<div>在需要的地方放置一个随机的边框。这对我来说似乎有点过分和肮脏。

我知道我可以使用Selectize、Select2、Chosen或任意数量的其他插件...我最终可能会这样做，但 OP 是正确的。

有任何想法吗？

Answer 1

我可能问错了问题，但是

select option:first-letter 
{
  text-decoration:underline;
}

对我来说效果很好...

http://jsfiddle.net/mce1tL7e/2/