製作單選按鈕看起來像是按鈕

Question

我想爲捐款表單設置一組單選按鈕，但是我希望它們看起來像按鈕而不是圓形撥號。

什麼是最好的方法來做這樣的事情？另外，請記住，它必須與IE8一起工作。

這裏是我到目前爲止，http://jsfiddle.net/YB8UW/

.donate-now { 
    list-style-type:none; 
    margin:25px 0 0 0; 
    padding:0; 
} 

.donate-now li { 
    float:left; 
    margin:0 5px 0 0; 
} 

.donate-now label { 
    padding:5px; 
    border:1px solid #CCC; 
    cursor:pointer; 
} 

.donate-now label:hover { 
    background:#DDD; 
} 

謝謝

Answer 1

不要聽那些說不能用CSS完成的人，更不要推薦一些大型框架。我一直用複選框和單選按鈕來做這件事。

這個工程不需要添加新的HTML或引入任何JS庫。 =>jsFiddle

的HTML

<ul class="donate-now"> 
<li> 
    <input type="radio" id="a25" name="amount" /> 
    <label for="a25">$25</label> 
</li> 
<li> 
    <input type="radio" id="a50" name="amount" /> 
    <label for="a50">$50</label> 
</li> 
<li> 
    <input type="radio" id="a75" name="amount" checked="checked" /> 
    <label for="a75">$75</label> 
</li> 
<li> 
    <input type="radio" id="a100" name="amount" /> 
    <label for="a100">$100</label> 
</li> 
<li> 
    <input type="radio" id="other" name="amount" /> 
    <label for="other">other:</label> 
</li> 
<li> 
    <input type="text" id="otherAmount" name="numAmount" /> 
</li> 
</ul> 

的CSS

.donate-now { 
    list-style-type:none; 
    margin:25px 0 0 0; 
    padding:0; 
} 

.donate-now li { 
    float:left; 
    margin:0 5px 0 0; 
    width:100px; 
    height:40px; 
    position:relative; 
} 

.donate-now label, .donate-now input { 
    display:block; 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
} 

.donate-now input[type="radio"] { 
    opacity:0.01; 
    z-index:100; 
} 

.donate-now input[type="radio"]:checked + label, 
.Checked + label { 
    background:yellow; 
} 

.donate-now label { 
    padding:5px; 
    border:1px solid #CCC; 
    cursor:pointer; 
    z-index:90; 
} 

.donate-now label:hover { 
    background:#DDD; 
} 

這是10分鐘哈克版本新秩序，你甚至可以進一步清理，但它顯示了它是多麼簡單的一個很好的例子。

Answer 2

不幸的是，你不能直接在任何瀏覽器風格的單選按鈕。要做到這一點的方法是使用<label>元素並正確設置for屬性，然後使用visibility: hidden而不是display: none來隱藏單選按鈕本身。然後，您可以將標籤放在任何需要的位置，並且它們將充當單選按鈕。您需要一點javascript才能根據<input>元素的狀態控制標籤的樣式，因爲IE8不會支持像:checked這樣的高級CSS僞類。

這是一個黑客的一點，但它是使用本地單選按鈕與自定義圖形，仍然保持可訪問性的唯一方法。

Answer 3

編輯：如果您需要支持IE瀏覽器，這不是一個解決方案。

---

你可以使用CSS的外觀性：

SEE DEMO

-webkit-appearance: button; /* WebKit */ 
-moz-appearance: button; /* Mozilla */ 
-o-appearance: button; /* Opera */ 
-ms-appearance: button; /* Internet Explorer */ 
appearance: button; /* CSS3 */ 

Answer 4

或者如果你想自己做...

我會做的是與<button>元素和隱藏的表單字段元素記住哪一個是「按下」像這樣創建的按鈕：

<button type="button" id="btn1">Choice 1</button> 
<button type="button" id="btn2">Choice 2</button> 
<button type="button" id="btn3">Choice 3</button> 
<input type="hidden" id="btnValue" value="" /> 

您將CSS來表明按鈕被「按下」或不「按下」所以你會需要它們在默認情況下是這樣的：

button 
{ 
    border-width: 2px; 
    border-style: outset; 
    border-color: /*Insert a darker version of your button color here*/ 
} 

然後在jQuery的（如果你能在jQuery的做到這一點，你可以做到這一點的直JavaScript，所以請記住，如果你d on't想使用jQuery）：

$("#btn1").click(function() { 
    $(this).css("border-style", "inset") 
    $("#btn2").css("border-style", "outset;"); 
    $("#btn3").css("border-style", "outset;"); 
    $("btnValue").val("btn1IsPressed"); 
}); 
$("#btn2").click(function() { 
    $(this).css("border-style", "inset") 
    $("#btn1").css("border-style", "outset;"); 
    $("#btn3").css("border-style", "outset;"); 
    $("btnValue").val("btn2IsPressed"); 
}); 
$("#btn3").click(function() { 
    $(this).css("border-style", "inset") 
    $("#btn1").css("border-style", "outset;"); 
    $("#btn2").css("border-style", "outset;"); 
    $("btnValue").val("btn3IsPressed"); 
}); 

現在，所有你需要做的就是請求#btnValue POST後的值（或GET或其他），就像你通常會告訴他們有哪些「按鈕」按下。

請注意，您需要添加一些功能來「解除」按鈕，但我認爲您明白了。您只需在點擊時讀取#btnValue的值，並與其他語句一起使用if分支來處理它是否已被按下，並相應地切換邊界（不要忘記清除（""）值爲#btnValue的「解壓」按鈕，以便您可以判斷他們是否將它們全部未按下）。