CSS點擊切換驗證碼是一種優雅且實用的方式，它可以為用戶提供更好的用戶體驗。下面是如何實現CSS點擊切換驗證碼：

HTML:
<div class="code">
<p id="code1">ABCD</p>
<p id="code2" style="display:none">EFGH</p>
<button onclick="changeCode()">切換驗證碼</button>
</div>
CSS:
.code {
width: 100px;
height: 50px;
position: relative;
}
.code p {
font-size: 20px;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.code button {
margin-top: 20px;
}
JS:
function changeCode() {
var code1 = document.getElementById("code1");
var code2 = document.getElementById("code2");
if (code1.style.display !== "none") {
code1.style.display = "none";
code2.style.display = "block";
} else {
code1.style.display = "block";
code2.style.display = "none";
}
}

HTML部分創建了一個包含兩個p標簽和一個button標簽的div容器，其中一個p標簽顯示驗證碼ABCD，另一個p標簽顯示驗證碼EFGH，button標簽用于觸發切換操作。CSS部分設置了容器和p標簽的樣式，使其垂直和水平居中。JS部分定義了切換驗證碼的函數，當點擊button標簽時，會切換兩個p標簽的顯示狀態。

這種方法可以用于登錄頁面、注冊頁面、評論區等需要驗證碼的場景，既美觀又方便，是一種值得推薦的實現方式。