Switch between combox and radio buttons with CSS - html

Question

Is it possible to define HTML + CSS such that only a change to the stylesheet is needed to specify whether a choice is represented as a drop-down combobox or a list of radio buttons?
I suspect the answer to this is simply 'no' (which is perfectly acceptable as an answer, if backed up with evidence), but hopefully there's a way.

Answer 1

Do you mean something like this? Not cross-browser and very rough though, you could switch by simply changing the class.
Demo Snippet:
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 2

The answer is sort of "No". You can't redefine a SELECT input a a list of radio buttons. However, you could create two divs with the separtae inputs contained within, and then display or not display based on 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

You can hide one or the other with CSS, but you will have to design your JS (or whatever is receiving this information) more robustly - Check both options and take data from the non-empty one.
Simply make one display and one not
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

What you can do is style the css for all selects and then change the style for radio buttons.
Kinda like this
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;
}
here are some links that might help.
http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/
http://css-tricks.com/dropdown-default-styling/