純css編寫開關按鈕
程式碼展示
<!DOCTYPE html>
<html>
<head>
<title>css編寫開關按鈕</title>
<style type="text/css">
.chooseBtn {
display: none;/*隱藏的是勾選的複選框*/
}
.choose-label {
/*box-shadow屬性向框新增一個或多個陰影。可以使用 border-image-* 屬性來構造漂亮的可伸縮按鈕*/
box-shadow: #ccc 0px 0px 0px 1px;
width: 40px;/*按鈕的寬度*/
height: 20px;
display: inline-block;
border-radius: 20px;
position: relative;
background-color: #bdbdbd;
overflow: hidden;
}
.choose-label:before {
content: '';
position: absolute;
left: 0;
width: 20px;
height: 20px;
display: inline-block;
border-radius: 20px;
background-color: #fff;
z-index: 20;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
/*加號（+）為：相鄰同胞選擇器*/
/*“+”是選擇相鄰兄弟，叫做“相鄰兄弟選擇器”。如果需要選擇緊接在另一個元素後的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器*/
.chooseBtn:checked + label.choose-label:before {/*:before 表示在元素之前插入新的內容*/
/*選擇緊接在.chooseBtn元素後出現的.choose-label元素(需要滿足.chooseBtn和.choose-label元素擁有共同的父元素)*/
left: 20px;
}
.chooseBtn:checked + label.choose-label {
background-color: #51ccee;
}
</style>
</head>
<body>
<input type="checkbox" name="sex" id="male" class="chooseBtn" />
<label for="male" class="choose-label"></label>
</body>
</html>
效果圖展示
小提示
<label> 標籤為 input 元素定義標註（標記）。
label 元素不會向用戶呈現任何特殊效果。不過，它為滑鼠使用者改進了可用性。如果您在 label 元素內點選文字，就會觸發此控制元件。就是說，當用戶選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控制元件上。
<label> 標籤的 for 屬性應當與相關元素的 id 屬性相同。