制作单选按钮看起来像是按钮

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的“解压”按钮，以便您可以判断他们是否将它们全部未按下）。