在Web開發中,經常需要使用按鈕組對不同的操作進行分類。然而,在某些情況下,我們希望只能激活一個按鈕,而不是多個。這時候,我們需要使用CSS來實現這個效果。
.btn-group input[type="radio"] { display: none; } .btn-group label { display: inline-block; padding: 5px 10px; background-color: #eee; border: 1px solid #999; cursor: pointer; } .btn-group input[type="radio"]:checked + label { background-color: #2ecc71; color: #fff; }
首先,我們需要將所有的按鈕的input元素的type設置為radio,并給他們添加相同的name屬性,這樣它們就會互相排斥,只會激活其中一個按鈕。然后,通過給這些input元素設置display:none來隱藏它們。
接下來,我們給每個label元素添加樣式。我們需要給它們設置display:inline-block,這樣它們就可以排列在一行。然后,我們再添加一些padding、背景色、邊框和指針。這些都是可以自己調整的,根據自己的需求來設置就好。
最后,我們使用:checked偽類來選擇被選中的radio元素,并給它對應的label元素添加樣式。這樣,只有被選中的按鈕才會有不同的樣式。
這樣,我們就完成了只能激活一個按鈕的效果。這個技巧可以用于各種情況,希望對大家有所幫助。