Question

我知道<select>很难与之合作，但我正在使用 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/

下划线：带CSS的select的第一个字母

1 个答案: