滑動開關切換按鈕﹍CSS 語法產生器

最簡單的切換選項效果，是使用 Input 元素的 radio 型態，也就是單選(非複選)的效果，長得像這樣：



之前接到一個需求，希望切換效果做得有質感，像是蘋果系統的切換按鈕，例如下面的範例：



原以為這樣的效果，需要用 JS 才能做出來，沒想到純 CSS 就能有很棒的效果，請見本篇的介紹。

一、Proto.io

Proto.io 是一個收費的網頁服務，不過也提供了一些免費的小工具，其中這個是本篇要介紹的 CSS 語法產生器，能做出各種美觀的滑動切換開關按鈕：

• https://proto.io/freebies/onoff/

進入網頁後，馬上就有一個 DEMO 切換按鈕可以看效果，同時也提供了各種參數可以自訂：

• Style: 這裡有四種樣式可以選擇，例如選 iOS10 的話，就是 iPhone 常見的開關效果
• 其他不管是字體大小、各種底色等 CSS 設定，都可以自訂
• 上方都會出現即時的預覽效果
• 下方也會出現即時變更的 CSS、HTML 程式碼

調整出滿意的效果後，直接複製 HTML、CSS 就可在網頁上使用。

二、範例效果

以下提供一個範例，說明比較重要的修改之處。




程式碼：

<div class="center">
<div class="switch_demo">
<input type="checkbox" name="switch_demo" class="switch_demo-checkbox" id="switch_demo" checked>
<label class="switch_demo-label" for="switch_demo">
<span class="switch_demo-inner"></span>
<span class="switch_demo-switch"></span>
</label>
</div>
</div>
<style>
.switch_demo {
position: relative;
width: 150px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.switch_demo-checkbox {
display: none;
}
.switch_demo-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 20px;
}
.switch_demo-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.switch_demo-inner:before,
.switch_demo-inner:after {
display: block;
float: left;
width: 50%;
height: 30px;
padding: 0;
line-height: 30px;
font-size: 14px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.switch_demo-inner:before {
content: "開啟";
padding-left: 10px;
background-color: #34A7C1;
color: #FFFFFF;
}
.switch_demo-inner:after {
content: "關閉";
padding-right: 10px;
background-color: #EEEEEE;
color: #999999;
text-align: right;
}
.switch_demo-switch {
display: block;
width: 18px;
margin: 6px;
background: #FFFFFF;
position: absolute;
top: 0;
bottom: 0;
right: 116px;
border: 2px solid #999999;
border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.switch_demo-checkbox:checked + .switch_demo-label .switch_demo-inner {
margin-left: 0;
}
.switch_demo-checkbox:checked + .switch_demo-label .switch_demo-switch {
right: 0px;
}
</style>

• 紅字的地方，"開啟"、"關閉"就是原本預設會顯示 "ON"、"OFF"之處，可改為自訂字串。
• 如果要修改整個開關的寬度，那麼直接改藍字這裡，版面效果會不如預期。最好直接從官網的項目 "Sizing"這裡，直接調整寬度(width) 的值，再複製產生的 CSS 即可。