Question

是否可以使用纯html / css创建像JQuery那样的单选按钮？

感谢

Answer 1

试试这个小提琴：http://jsfiddle.net/mcXm7/1/
这个例子是100％纯CSS，它在新的浏览器上工作正常（当然可以随意添加所有必要的样式，使按钮看起来像你的例子）

HTML

<input type="radio" name="rd" id="choice1" value="1">
<label for="choice1" >Choice 1</label>

<input type="radio" name="rd" id="choice2" value="2">
<label for="choice2" >Choice 2</label>

<input type="radio" name="rd" id="choice3" value="3">
<label for="choice3" >Choice 3</label>

CSS

label { display : inline-block;
        padding : 2px 5px;
        cursor  : pointer;
        border  : 1px #b6b6b6 outset; }

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

input[type="radio"]:checked + label { 
        border: 1px #b6b6b6 inset; 
}

/* hover style */
input[type="radio"] + label:hover { ... }
input[type="radio"]:checked + label:hover { ... }

:checked不支持IE<9：有关可用的css / css3功能的完整列表，请参阅http://www.impressivewebs.com/css3-support-ie9/，因此对于较旧的浏览器，javascript回退是正常工作所必需的。

JS回退的基本示例：http://jsfiddle.net/mcXm7/2/（无需加载jQuery UI）

Radiobutton-Buttons纯html / css

1 个答案: