[SOLVED] Switch between combox and radio buttons with CSS

Issue

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.

Solution

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>

Answered By – Abhitalks

Answer Checked By – Terry (BugsFixing Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *