3

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?

2
  • 1
    I have never seen a drop-down control with the access key on the placeholder option, seeing as you would lose sight of the access key once you actually choose an option. Usually the access key is on the label for that control, so it is always visible regardless of the selection. Perhaps you could go with that instead?
    – BoltClock
    Jan 27, 2015 at 16:08
  • I'm not certain that will work with how I've approached this... As you'll see the labels are actually not visible until focused. But that is how I would usually approach it.
    – darcher
    Jan 27, 2015 at 16:19

1 Answer 1

5

I could have mistaken the question, but

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

works fine for me...

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

5
  • That does seem to work... Now I'm puzzled. I need to do some digging.
    – darcher
    Jan 27, 2015 at 16:35
  • It's not working for me (no underline for the first-letter in the <option>) in Chrome (Win 8.1/Chrome 40.x and Opera 27) Jan 27, 2015 at 16:55
  • “Works” in my Chrome 40 (Win 7). Does not “work” in IE. When it “works”, this should be considered a browser bug, since according CSS specifications, :first-letter “applies to block-like containers such as block, list-item, table-cell, table-caption, and inline-block elements”. Jan 27, 2015 at 17:12
  • Yeah I think I'll just have to use :before on a block level parent to achieve the desired result
    – darcher
    Jan 27, 2015 at 17:30
  • Firefox no longer works. Shame as it would be useful I was hoping to do something with icon fonts.
    – R Reveley
    Jun 27, 2016 at 11:00

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.