html中两行复选框,html - 如何在纯CSS中使带有两个（独立）复选框的HTML选择字段 - 堆栈内存溢出...

我需要创建一个选择列表，其中每个项目都有两个复选框(或者至少一个可以采用3个值的复选框：“ x”，“ v”或“空白”)。

现在，我对CSS进行了选择，并添加了Unicode字符2611/2610，但是它只有两种可能的状态，如果我添加第二个复选框，它也会随着单击而切换。

这段代码是我目前的情况：CSS：

select.control option::before {

content: "\2610"; /*2612 è la crocetta*/

width: 1.3em;

text-align: center;

display: inline-block;

}

select.control option:checked::before {

content: "\2611";

}

select.control[multiple]{

overflow-y:scroll;

min-height: 40px;

max-height: 30%

}

HTML：

Postazioni

P 1

P 2

P 3

这是输出：所需： 当前的：

注意：显然，我想同时获得第一个和第二个选择值。 并且，如果可能的话，不显示任何突出显示(选择就足够了)