CSS撥動開關組中的幾個按鈕

Question

我想要的東西就像JQuery Mobile Flip Toggle Switch，但只是，那麼我不想將所有JQuery Mobile庫加載到我的項目中。

你知道如何做一個不錯的CSS切換按鈕（多於2個按鈕）嗎？我沒有找到任何東西。

提前感謝！ PS：我不關心IE的兼容性。

Answer 1

做得很快。希望它能幫助你。

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; 
 
}

<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>