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>͟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?