1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

input[type="checkbox"]{

  display: inline-block; // 設置為 行內塊 就能改變大小了

  width: 30px;

  height: 30px;

  -webkit-appearance: none;  // 改變元素外觀

  -moz-appearance: none; // 改變元素外觀

  appearance: none; // 改變元素外觀

  background: #fff;

  border-radius: 3px;

  border: 1px solid #888;

}

input[type="checkbox"]:checked{ // 復選框選中的樣式 使用帶有對號的 背景圖片打底

  background: url("images/checkbox-checked.png") no-repeat;

  background-size: 100% 100%;

  border: none;

}