CSS 反色選框是一種常見的設計元素，可以幫助網頁設計師在頁面中增加醒目的視覺效果。通過使用 CSS 的 filter 屬性和偽類 :checked，我們可以輕松地實現反色選框效果。 首先，我們需要為頁面中需要使用反色選框的元素添加一個 input 標簽，并設置其 type 屬性為checkbox。例如，我們想要為一個按鈕添加反色選框，我們可以這樣寫：

<input type="checkbox" id="btn-checkbox">
<label for="btn-checkbox">點擊這里</label>

這里我們使用了一個 label 標簽來關聯 input 元素，通過 for 屬性與 input 的 id 值對應，實現了點擊 label 即可觸發 input 的選中效果。以上代碼可以在 p 標簽中嵌套，如下：

<p>
	<input type="checkbox" id="btn-checkbox">
	<label for="btn-checkbox">點擊這里</label>
</p>

接下來，我們需要寫 CSS 來實現反色選框的效果。我們可以使用 filter 屬性來翻轉元素的顏色，同時使用 :checked 偽類選擇器來實現用戶選中了 checkbox 后執行特定的樣式。以下是實現反色選框效果的 CSS 代碼：

p input[type="checkbox"] {
	display: none; /* 隱藏原始的 checkbox */
}
p input[type="checkbox"] + label:before {
	content: 'OFF'; /* 在按鈕前加入文本標識 */
	padding-right: 10px;
}
p input[type="checkbox"]:checked + label:before {
	content: 'ON'; /* checkbox 選中時顯示 ON 文本 */
	background-color: #000000;
	color: #FFFFFF; /* 翻轉按鈕顏色 */
}
p input[type="checkbox"]:checked + label {
	background-color: #FFFFFF;
	color: #000000; /* 翻轉按鈕背景顏色和文本顏色 */
}

最后，我們將 CSS 代碼應用到頁面中的 p 元素即可。通過這樣簡單的操作，我們就能夠實現一個漂亮的反色選框效果，為頁面增加視覺吸引力。