html - 使用 CSS 在组合框和单选按钮之间切换

Question

是否可以定义 HTML + CSS，以便只需要更改样式表即可指定一个选项是表示为下拉组合框还是单选按钮列表？

我怀疑对此的答案只是“否”(如果有证据支持，这是完全可以接受的答案)，但希望有办法。

Answer 1

你的意思是这样的吗？不能跨浏览器而且非常粗糙，你可以通过简单地改变类来切换。

演示代码段:

select.radio {
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none; height: 1.5em;
}
select.radio, select.radio:focus { outline: none; }
select.radio > option { display: inline-block; }
select.radio > option::before {
    content: '';
    display: inline-block;
    width: 12px; height: 12px;
    border: 1px solid gray; border-radius: 50%;
    margin-right: 4px;
    vertical-align: top;
}
select.radio > option:checked {
    color: #000;
    background: -webkit-linear-gradient(#ccc, #ccc);
}
select.radio > option:checked::before {
    background-color: #00f;
}

select.normal {
    width: 120px;
}
select { margin: 16px; }

<select id="dl1" size="4" class="radio">
    <option value="One">One</option>
    <option value="Two" selected>Two</option>
    <option value="Three">Three</option>
    <option value="Four">Four</option>
</select>
<select id="dl2" size="4" class="normal">
    <option value="One">One</option>
    <option value="Two" selected>Two</option>
    <option value="Three">Three</option>
    <option value="Four">Four</option>
</select>