CSS 開關提示框是一種非常有用的UI元素，用于讓用戶選擇一個確定的選項。這個開關可以很輕松地添加到你的網站或應用程序中，只需要一些簡單的CSS代碼即可實現。在這篇文章中，我們將會教你如何創建一個CSS開關提示框，并提供一些有用的代碼。

/* 開關提示框樣式 */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* 開關標簽 */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* 滑塊 */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* 不打勾的提示文字 */
.off {
position: absolute;
top: 7px;
left: 69px;
font-family: Arial, sans-serif;
font-size: 12px;
color: #333;
}
/* 打勾的提示文字 */
.on {
position: absolute;
top: 7px;
left: 12px;
font-family: Arial, sans-serif;
font-size: 12px;
color: white;
}

HTML結構使用label和input標簽：

開關

使用這些CSS和HTML代碼，你就能夠創建一個美觀、實用的CSS開關提示框了。如果你需要對其做一些個性化的調整，只需要簡單地修改CSS代碼即可。