css - 转换选择选项以进行链接

Question

是否可以将选项的每个选项显示为标签/跨度？

我需要像这样显示，但为了避免与现有的其他解决方案发生冲突，我不想更改html。

示例：

div
    select
         item 1
         item 2

预期结果

div    
    item 1 | item 2 | item 3

Answer 1

您可以使用转义的unicode 作为css内容属性 将其添加到select html标记内的选项元素 把它放在css中：

option:not(:first-child):before { content:"\00a6"; }

这将显示角色|在所有选项之前，但第一个选项：

option 1 | option 2 | option 3

有关可用的unicode选项here的更多读数。

更新

为了使选项html元素排成一行，你可以这样做：

select option                          { display: inline-block; }
select option:not(:first-child):before { content:"\00a6"; }