CSS切换开关组的几个按钮

Question

我喜欢像JQuery Mobile Flip Toggle Switch这样的东西，但就是这样，我不想将所有JQuery Mobile库加载到我的项目中。

你知道如何做一个漂亮的CSS切换按钮（更多2个按钮）吗？我没找到任何东西。

提前致谢！

PS：我不关心与IE的兼容性。

Answer 1

快点做了一件事。希望它会对你有所帮助。

＆＃13;

＆＃13;

ul.tab {
    list-style-type:none;
    margin: 0;
    padding:0;
    border-radius: 5px;
}
ul.tab li {
    float: left;
    padding: 0;
}
ul.tab li label {
  background: white;  
  padding: 6px;
  border: 1px solid #ccc;
  display: inline-block;
}
ul.tab li input[type="radio"] {
    opacity: 0;
    width:1px;
    height:1px;
}
ul.tab li input[type="radio"]:checked ~ label {
    background: red;
    color: white;
}

＆＃13;

<ul class="tab">
    <li>
        <input id="tab1" checked="checked" type="radio" name="tab" />
        <label for="tab1">Basic</label>
    </li>
    <li>
        <input id="tab2" type="radio" name="tab" />
        <label for="tab2">Options</label>
    </li>
    <li>
        <input id="tab3" type="radio" name="tab" />
        <label for="tab3">Methods</label>
    </li>
    <li>
        <input id="tab4" type="radio" name="tab" />
        <label for="tab4">Events</label>
    </li>
</ul>

＆＃13;

＆＃13;

＆＃13;