自定義checkbox樣式（兼容IE9）

時間 2019-11-29

原文原文鏈接

如今不少前端框架或庫能實現checkbox自定義樣式，這裏介紹一下最原生的方式來自定義checkbox樣式，而且最先能兼容至IE9瀏覽器。css

不考慮IE9及如下瀏覽器

使用下列圖片：

<!DOCTYPE html>
<html>
<head>
  <style> input[type="checkbox"] { appearance: none; -moz-appearance: none; -ms-progress-appearance: none; -webkit-appearance: none; outline: none; vertical-align: text-top; /* 根據本身需求定義 */ width: 16px; height: 16px; background-image: url("https://user-gold-cdn.xitu.io/2018/3/27/162681b8a147aabe?w=48&h=16&f=png&s=18072"); background-position: 0 0; } input[type="checkbox"]:hover { background-position: -16px 0; } input[type="checkbox"]:checked { background-position: -32px 0; } </style>
</head>
<body>
  <input type="checkbox">自定義Checkbox
</body>
</html>
複製代碼

css中圖片爲：html

這個方案兼容大部分瀏覽器，可是IE9是不支持的。前端

考慮IE9，須要增長label標籤

對於IE9來講，appearance屬性無效，則須要藉助一個新屬性label實現。web

html結構必須爲：瀏覽器

<html>
<body>
  <input id="my-id" type="checkbox" /><label for="my-id"></label>
</body>
</html>
<!-- 注意 input 必須帶上id，label的for必須指向這個id，不然影響功能 -->
複製代碼

將css樣式修改下列代碼便可：前端框架

input[type="checkbox"] {
  display: none;
}
input[type="checkbox"] + label {
  width: 16px;
  height: 16px;
  background-image: url("https://user-gold-cdn.xitu.io/2018/3/27/162681b8a147aabe?w=48&h=16&f=png&s=18072");
  background-position: 0 0;
}
input[type="checkbox"] + label:hover {
  background-position: -16px 0;
}
input[type="checkbox"]:checked + label {
  background-position: -32px 0;
}
複製代碼