自定義checkbox樣式（相容IE9）

夜起葉落發表於2018-03-27
IE9

現在很多前端框架或庫能實現checkbox自定義樣式，這裡介紹一下最原生的方式來自定義checkbox樣式，並且最早能相容至IE9瀏覽器。

不考慮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中圖片為：

checkbox-image

這個方案相容大部分瀏覽器，但是IE9是不支援的。

考慮IE9，需要增加label標籤

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

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;
}
複製程式碼
  1. checkbox樣式同樣可以使用CSS繪製，而不引用圖片
  2. disabled樣式可以藉助選擇器input[type="checkbox"][disabled]:checked + label

原文連結：自定義checkbox樣式（相容IE9）

相關文章