最初發佈在我的部落格上
老故事
過去，像checkbox這樣的 HTML 元件很難按照我們想要的方式設定樣式。通常這些元件會突顯整個頁面設計，這對使用者體驗不太好。
更不用說每個瀏覽器都有（並且仍然有）自己的控制外觀，從而導致不同瀏覽器之間的外觀和感覺有所不同。
為了克服這些情況，開發人員過去常常進行大量駭客攻擊，例如隱藏輸入、為複選標記建立圖像和圖標以及加入一堆 JavaScript 程式碼來處理檢查/取消檢查。如果你問我，這並不那麼漂亮，而且似乎需要做很多工作才能實現一些簡單的事情。
新故事
上述時代早已過去，我們比以往任何時候都更接近在所有瀏覽器上看起來和感覺都相同的複選框樣式的通用方式，特別是有訊息稱 Microsoft 正在建置基於 chromium 的瀏覽器。你可以在這裡讀到它 。
從我的角度來看，新的故事是我們可以設定複選框的樣式而不隱藏它，也無需加入 SVG 圖像和 JavaScript 程式碼。這可以透過使用以下方法來完成：
CSS
appearance屬性HTML
check mark符號 (✓)
外觀性能
外觀屬性用於使用基於使用者作業系統主題的平臺本機樣式來顯示元素。
這個屬性支援許多值，但我們感興趣的是值none 。基本上，我們想要刪除所有本機樣式並套用自訂樣式。最後，我們的複選框將具有漂亮的顏色和過渡，最重要的是，它在所有主要瀏覽器中的外觀和感覺都相同。
用法範例：
.my-class {
-webkit-appearance: value;
-moz-appearance: value;
/* -o-appearance: value; - Not required since the new version of Opera uses -
webkit prefix for this property, but we've added it nevertheless just to be aware
of it
*/
appearance: value;
}
好的，讓我們深入研究程式碼。
超文本標記語言
我們的 HTML 標記非常簡單。我們有一個label包裹我們的input和一個span來保存文字。它看起來像這樣：
<label class="checkbox">
<input type="checkbox" />
<span>Check Me</span>
</label>
這裡沒有什麼太花俏的。我們使用包裝元素來更輕鬆地垂直對齊內部專案。這是透過我們將在 CSS 部分看到的 Flexbox 佈局來完成的。
CSS
CSS 樣式如下所示：
.checkbox {
display: inline-flex;
cursor: pointer;
position: relative;
}
.checkbox > span {
color: #34495E;
padding: 0.5rem 0.25rem;
}
.checkbox > input {
height: 25px;
width: 25px;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
border: 1px solid #34495E;
border-radius: 4px;
outline: none;
transition-duration: 0.3s;
background-color: #41B883;
cursor: pointer;
}
.checkbox > input:checked {
border: 1px solid #41B883;
background-color: #34495E;
}
.checkbox > input:checked + span::before {
content: '\2713';
display: block;
text-align: center;
color: #41B883;
position: absolute;
left: 0.7rem;
top: 0.2rem;
}
.checkbox > input:active {
border: 2px solid #34495E;
}
如果您認為這仍然是大量 CSS，請讓我提醒您，我們不需要 Flexbox 佈局或過渡來實現此樣式。加入此內容是為了使其更加優雅。如果我們刪除額外的 CSS，我們需要做的就是透過將appearance設為none來刪除預設樣式，新增邊框和顏色並設定 HTML 符號。
讓我們分解一下重要的部分來支持上面的陳述。第一步是使用appearance屬性並刪除預設樣式：
...
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
...
希望這個屬性很快就會成為標準，我們將能夠在沒有瀏覽器特定前綴的情況下使用它。
接下來，我們需要提供自訂邊框和背景：
...
border: 1px solid #34495E;
border-radius: 4px;
outline: none;
background-color: #41B883;
cursor: pointer;
...
最後，我們將使用::before偽類別來設定 HTML 符號的樣式。在我們檢查輸入欄位後，下面的 CSS 將顯示 HTML 符號，顏色和位置都很好。
...
content: '\2713';
display: block;
text-align: center;
color: #41B883;
position: absolute;
left: 0.7rem;
top: 0.2rem;
...
就是這樣！真的就是這麼簡單。為了將複選框設計與頁面的其餘部分相匹配，無需再使用 JavaScript 來實現這些樣式。我們可以使用這裡提供的 CSS 安全地實現它。
這是一個可以使用程式碼的現場小提琴：
https://jsfiddle.net/proticm/2wzatymr
進一步閱讀
如果您對 CSS 變數感興趣，請查看這篇文章或我的部落格上發布的這篇文章。
外觀屬性請參閱官方文件
原文出處：https://dev.to/proticm/styling-html-checkboxes-is-super-easy-302o
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
