Question

如何通过Bootstrap或用户使用其他插件来使用图像而不是单选按钮。

是否可以通过CSS设置样式，或者Bootstrap是否可以做类似的事情？

Answer 1

你需要这样的东西

HTML

<p>
<br>
<input id="r1" type="radio" name="rr">
<label for="r1">
<span></span>
Radio Button 1
</label>
</p>

CSS

input[type="radio"] {
    display: none;
}


input[type="radio"] + label {
    color: #F2F2F2;
    font-family: Arial,sans-serif;
    font-size: 14px;
}
input[type="radio"]:checked + label span {
    background: url("check_radio_sheet.png") no-repeat scroll -57px top transparent;
}
input[type="radio"] + label span {
    background: url("check_radio_sheet.png") no-repeat scroll -38px top transparent;
    cursor: pointer;
    display: inline-block;
    height: 19px;
    margin: -1px 4px 0 0;
    vertical-align: middle;
    width: 19px;
}

Answer 2

prettyCheckable jQuery插件取代了Bootstrap的默认复选框和无线电输入，以获得更好，更有吸引力的输入：看看这个：link

兼容IE7 +，Chrome，Firefox，Safari和移动浏览器

放图像而不是收音机

2 个答案: