使单选按钮看起来像按钮 [英] Making radio buttons look like buttons instead

问题描述

我想为捐款表格设置一组单选按钮，但我希​​望他们看起来像按钮而不是圆形拨号。

I would like to have a set of radio buttons for a donation form, however I want them to look like buttons instead of the circle dials.

什么是最好的方法来做这样的事情？另外，请记住，它必须与IE8协同工作。

What is the best approach to making something like that? Also, keep in mind, it has to work with IE8.

这里是我到目前为止， http://jsfiddle.net/YB8UW/

Here's what I have so far, 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;
}

谢谢

推荐答案

不要听这些人说他不能用CSS做，或者更糟的推荐一些大框架。

Don't listen to these guys who say it can't be done with CSS, or worse recommend some large framework. I do this all the time with checkboxes and radio buttons.

不需要添加新的HTML，也不需要引入任何JS库。 => jsFiddle

HTML的新订单

THE NEW ORDER OF THE 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;
}

这是十分钟的hacky版本，但它显示了一个很好的例子，它是多么简单。

This is the ten minute hacky version, you can clean it up even further, but it shows a good example of how simple it is.

这篇关于使单选按钮看起来像按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！