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

Question

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

我怀疑这个问题的答案很简单 'no'（如果有证据支持，这个答案是完全可以接受的），但希望有办法。

Answer 1

您可以使用 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 2

答案有点像 "No"。您不能将 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 3

您可以为所有选择设置 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/

Answer 4

你的意思是这样的吗？不是跨浏览器而且非常粗糙，你可以通过简单地改变 class.

来切换

演示代码段:

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>

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

Switch between combox and radio buttons with CSS

html

css

choice