[CSS] checkbox hack 模擬在網頁開視窗

2017-04-11 234 words 2 minutes

Contents

什麼是 CSS Checkbox Hack？

CSS Checkbox Hack 是一種純 CSS 技巧，利用 <input type="checkbox"> 的 :checked 偽類選擇器，搭配 CSS 的兄弟選擇器（~），在不使用任何 JavaScript 的情況下實現 toggle（切換顯示/隱藏）效果。

基本原理

核心概念是：

一個隱藏的 checkbox 輸入框
一個 <label> 標籤綁定到該 checkbox（點擊 label 等同於點擊 checkbox）
利用 :checked 選擇器搭配 ~ 兄弟選擇器控制其他元素的樣式

模擬網頁開視窗（Modal）範例

以下是用 CSS Checkbox Hack 製作彈出視窗的完整範例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<!-- HTML 結構 -->
<input type="checkbox" id="modal-toggle" class="modal-checkbox">
<label for="modal-toggle" class="open-btn">開啟視窗</label>

<div class="modal-overlay">
    <div class="modal-content">
        <h2>這是彈出視窗</h2>
        <p>這裡是視窗內容。</p>
        <label for="modal-toggle" class="close-btn">關閉</label>
    </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36


/* 隱藏 checkbox 本身 */
.modal-checkbox {
    display: none;
}

/* 預設隱藏遮罩和視窗 */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

/* 當 checkbox 被勾選時，顯示遮罩 */
.modal-checkbox:checked ~ .modal-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 視窗樣式 */
.modal-content {
    background: white;
    padding: 30px;
    border-radius: 8px;
    min-width: 300px;
}

.open-btn, .close-btn {
    cursor: pointer;
    padding: 8px 16px;
    background: #007bff;
    color: white;
    border-radius: 4px;
}

運作流程

頁面載入時 checkbox 未勾選，.modal-overlay 為 display: none
使用者點擊「開啟視窗」label → checkbox 變為 :checked
CSS 選擇器 .modal-checkbox:checked ~ .modal-overlay 生效，顯示遮罩
點擊「關閉」label → checkbox 取消勾選 → 遮罩再次隱藏

使用場景

導覽選單的展開/收合
手風琴（Accordion）效果
Tab 切換
彈出視窗（Modal）
行動裝置漢堡選單

優缺點

優點：

不需要 JavaScript，純 CSS 實現
輕量，無額外依賴

缺點：

無障礙（Accessibility）支援較差
HTML 結構較複雜
複雜互動仍建議使用 JavaScript