html - 下划线 :first-letter of a select with CSS

Question

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

使用占位符很容易，

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