Question

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

我怀疑这个问题的答案只是“不”（如果有证据支持，这是一个完全可以接受的答案），但希望有办法。

Answer 1

答案有点“不”。您无法将SELECT输入重新定义为单选按钮列表。但是，您可以创建两个div，其中包含separtae输入，然后显示或不显示基于CSS。

<style>
    #divSelect
    {
        display : none;
    }
    #divRadio
    {
        display : block;
    }
</style>

<div id="divSelect">
    <select id="MyChoice" name="MyChoice" size="1">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</div>
<div id="divRadio">
   1 <input type="radio" name="MyChoice" value="1"/><br/>
   2 <input type="radio" name="MyChoice" value="2"/><br/>
   3 <input type="radio" name="MyChoice" value="3"/><br/>
</div>

Answer 2

你是说这样的意思吗？虽然不是跨浏览器和非常粗糙，但您可以通过简单地更改类来切换。

演示代码段 ：

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>

Answer 3

您可以使用CSS隐藏其中一个，但您必须更加健壮地设计您的JS（或任何正在接收此信息的内容） - 检查这两个选项并从非空的数据中获取数据。

只需制作一个显示屏，而不是

<强> HTML：

<div id="radios">
    bar <input type="radio" name="foo" value="bar"/>
    barbar <input type="radio" name="foofoo" value="barbar"/>
</div>
<div id="checks">
    <select name="bar">
        <option value="foo1">foo1</option>
        <option value="foo2">foo2</option>
    </select>
</div>

<强> CSS：

<style>
    #radios{
        display:block;
    }
    #checks{
        display:none;
    }
</style>

Answer 4

您可以做的是为所有选择设置css的样式，然后更改单选按钮的样式。有点像这样

select {
  font-family: Cursive;
}

input[type=radio   ]{
  display      : inline-block;
  margin-left  : -28px;
  padding-left : 28px;
  background   : url('checks.png') no-repeat 0 0;
  line-height  : 24px;
}

这里有一些可能有用的链接。 http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/ http://css-tricks.com/dropdown-default-styling/

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

4 个答案: