使用CSS在combox和單選按鈕之間切換

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>

Answer 2

你可以用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 3

答案是有點 「否」。您不能重新定義一個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 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/