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库即可使用。 =＆gt; 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;
}

这是十分钟的hacky版本，你可以进一步清理它，但它显示了一个简单的例子。

Answer 2

编辑： 如果您需要支持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 3

或者如果您想自己做这件事......

我要做的是创建带有<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中完成它，所以如果你不想使用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");
});

现在您需要做的就是在POST（或GET或其他）之后从#btnValue请求值，就像您通常会告诉他们按下哪个“按钮”一样。

请注意，您需要添加更多功能来“取消”按钮，但我认为您明白了这一点。您需要做的就是在点击时读取#btnValue的值，并与其他语句一起使用if分支来处理它是否已被按下并相应地切换边框（不要忘记清除（""）#btnValue对“按下”按钮的值，以便您可以判断他们是否将所有未按下的内容留下来。）

Answer 4

很遗憾，您无法直接在任何浏览器中设置单选按钮的样式。这样做的方法是使用<label>个元素并使用正确设置的for属性，然后使用visibility: hidden而不是display: none隐藏单选按钮。然后，您可以将标签放在任何位置，它们将充当单选按钮。您需要一些javascript来根据<input>元素的状态来控制标签的样式，因为IE8不支持像:checked这样的高级CSS伪类。

这有点像黑客，但它是使用自定义图形的原生单选按钮并仍然保持可访问性的唯一方法。

Answer 5

尝试使用jQuery这种简单的逻辑。

HTML：

<div class="radio-btn-row">
    <div class="radio-btn-wrapper">
        <button id="bt1" class="radio-btn" type="button">Button 1</button>
    </div>
    <div class="radio-btn-wrapper">
        <button id="btn2" class="radio-btn" type="button">Button 2</button>
    </div>
    <div class="radio-btn-wrapper">
        <button id="btn3" class="radio-btn" type="button">Button 3</button>
    </div>
    <div class="radio-btn-wrapper">
        <button id="btn4" class="radio-btn" type="button">Button 4</button>
    </div>
    <!--No matter how many buttons do you want -->
</div>

js：

    $.each($('.radio-btn'), function (key, value) {
        $(this).click(function (e) {
            $('.radio-btn-selected')
                .removeClass('radio-btn-selected')
                .addClass('radio-btn');

            $(this)
                .removeClass('radio-btn')
                .addClass('radio-btn-selected');

            //do whatever you want on click
        });
    });

css：

.radio-btn-row{
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 20px;
}

.radio-btn-wrapper{
  margin: 0px 4px;
}

.radio-btn{
  background-color: #FFFFFF;
  border: 1px solid #4A4A4A;
  color: #4A5362;   
  font-size: 14px;  
  line-height: 26px;    
  outline: none;
}

.radio-btn-selected{
  background-color: #FFFFFF;
  border: 1px solid #55BC7E;
  color: #55BC7E;
  font-size: 14px;  
  line-height: 26px;    
  outline: none;
}

使单选按钮看起来像按钮

5 个答案: