下划线：使用CSS选择的首字母

Question

I know <select> 's are notoriously a pain to work with, but I'm building a form with accesskey's and to inform the user of said keys I'm underlining the first letter of the form items.

This is easy with placeholder's,

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

and naturally easy with paragraphs,

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

however, I cannot for the life of me figure out how to approach <select> 's.

I've attempted a few things, I'll list them below.

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

The only way I've been able to accomplish it, is positioning a random <div> with a border exactly where it's needed. Which seems a little excessive and dirty to me.

I know I can use Selectize , Select2 , Chosen or any number of other plugins... Which I may end up doing anyways, but the OP stands.

Any Ideas?

Answer 1

I could have mistaken the question, but

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

works fine for me...

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