关于html：如何使用CSS设置复选框的样式？


How to style a checkbox using CSS?

我正在尝试使用以下选项设置复选框的样式：

1
<input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" />

但是没有应用样式。复选框仍显示其默认样式。我如何给它指定的样式？

相关讨论

更新：下面的答案引用了CSS3广泛可用之前的状态。在现代浏览器(包括Internet Explorer 9和更高版本)中，使用首选样式创建复选框替换更简单，而不使用JavaScript。

以下是一些有用的链接：

  • 仅使用CSS创建自定义表单复选框
  • 简易CSS复选框生成器
  • 你可以用"黑"复选框做的事情
  • 使用CSS3实现自定义复选框和单选按钮
  • 如何使用CSS设置复选框样式

值得注意的是，根本问题没有改变。您仍然不能将样式(边框等)直接应用于checkbox元素，并且这些样式会影响HTML复选框的显示。然而，改变的是现在可以隐藏实际的复选框，并用自己的样式元素替换它，只使用CSS。特别是，因为CSS现在有一个广泛支持的:checked选择器，所以您可以使替换内容正确反映复选框的选中状态。

老一套的回答

这里有一篇关于样式复选框的有用文章。基本上，作者发现不同浏览器的默认复选框差异很大，而且许多浏览器总是显示默认的复选框，不管您如何设计。所以真的没有一个简单的方法。

不难想象一个解决方案，在这个解决方案中，您将使用javascript在复选框上覆盖一个图像，并单击该图像，从而选中真正的复选框。没有javascript的用户将看到默认复选框。

编辑后添加：这是一个很好的脚本，可以为您做到这一点；它隐藏了真正的checkbox元素，用一个样式化的跨度替换它，并重定向click事件。

相关讨论

有一种方法可以只用CSS来实现这一点。我们可以(ab)使用label元素和样式。警告是这对IE8和更低版本不起作用。

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.myCheckbox input {
    // display: none;
    // Better than display: none for accessibility reasons
    position: relative;
    z-index: -9999;
}

.myCheckbox span {
    width: 20px;
    height: 20px;
    display: block;
    background: url("link_to_image");
}

.myCheckbox input:checked + span {
    background: url("link_to_another_image");
}

HTML：

1
2
3
4
5
<label for="test">Label for my styled"checkbox"</label>
<label class="myCheckbox">
    <input type="checkbox" name="test"/>
    <span></span>
</label>
相关讨论

您可以通过使用:after和:before伪类附带的新功能来实现相当酷的自定义复选框效果。这样做的好处是：您不需要再向DOM添加任何内容，只需要标准的复选框。

注意，这只适用于兼容的浏览器，我认为这与一些浏览器不允许您在输入元素上设置:after和:before有关。不幸的是，目前只支持WebKit浏览器。FF+IE仍然允许复选框正常工作，只是不加样式，这在将来有望改变(代码不使用厂商前缀)。

这只是一个WebKit浏览器解决方案(Chrome、Safari、移动浏览器)

参见示例小提琴

1
2
3
4
5
$(function() {
  $('input').change(function() {
    $('div').html(Math.random());
  });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
/* Main Classes */
.myinput[type="checkbox"]:before {
  position: relative;
  display: block;
  width: 11px;
  height: 11px;
  border: 1px solid #808080;
  content:"";
  background: #FFF;
}

.myinput[type="checkbox"]:after {
  position: relative;
  display: block;
  left: 2px;
  top: -11px;
  width: 7px;
  height: 7px;
  border-width: 1px;
  border-style: solid;
  border-color: #B3B3B3 #dcddde #dcddde #B3B3B3;
  content:"";
  background-image: linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
  background-repeat: no-repeat;
  background-position: center;
}

.myinput[type="checkbox"]:checked:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
}

.myinput[type="checkbox"]:disabled:after {
  -webkit-filter: opacity(0.4);
}

.myinput[type="checkbox"]:not(:disabled):checked:hover:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
}

.myinput[type="checkbox"]:not(:disabled):hover:after {
  background-image: linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
  border-color: #85A9BB #92C2DA #92C2DA #85A9BB;
}

.myinput[type="checkbox"]:not(:disabled):hover:before {
  border-color: #3D7591;
}

/* Large checkboxes */
.myinput.large {
  height: 22px;
  width: 22px;
}

.myinput.large[type="checkbox"]:before {
  width: 20px;
  height: 20px;
}

.myinput.large[type="checkbox"]:after {
  top: -20px;
  width: 16px;
  height: 16px;
}

/* Custom checkbox */
.myinput.large.custom[type="checkbox"]:checked:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
}

.myinput.large.custom[type="checkbox"]:not(:disabled):checked:hover:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

<table style="width:100%">
  <tr>
    <td>Normal:</td>
    <td><input type="checkbox" /></td>
    <td><input type="checkbox" checked="checked" /></td>
    <td><input type="checkbox" disabled="disabled" /></td>
    <td><input type="checkbox" disabled="disabled" checked="checked" /></td>
  </tr>
  <tr>
    <td>Small:</td>
    <td><input type="checkbox" class="myinput" /></td>
    <td><input type="checkbox" checked="checked" class="myinput" /></td>
    <td><input type="checkbox" disabled="disabled" class="myinput" /></td>
    <td><input type="checkbox" disabled="disabled" checked="checked" class="myinput" /></td>
  </tr>
  <tr>
    <td>Large:</td>
    <td><input type="checkbox" class="myinput large" /></td>
    <td><input type="checkbox" checked="checked" class="myinput large" /></td>
    <td><input type="checkbox" disabled="disabled" class="myinput large" /></td>
    <td><input type="checkbox" disabled="disabled" checked="checked" class="myinput large" /></td>
  </tr>
  <tr>
    <td>Custom icon:</td>
    <td><input type="checkbox" class="myinput large custom" /></td>
    <td><input type="checkbox" checked="checked" class="myinput large custom" /></td>
    <td><input type="checkbox" disabled="disabled" class="myinput large custom" /></td>
    <td><input type="checkbox" disabled="disabled" checked="checked" class="myinput large custom" /></td>
  </tr>
</table>

额外的Webkit风格翻转开关小提琴

1
2
3
4
5
6
$(function() {
  var f = function() {
    $(this).next().text($(this).is(':checked') ? ':checked' : ':not(:checked)');
  };
  $('input').change(f).trigger('change');
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
body {
  font-family: arial;
}

.flipswitch {
  position: relative;
  background: white;
  width: 120px;
  height: 40px;
  -webkit-appearance: initial;
  border-radius: 3px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: none;
  font-size: 14px;
  font-family: Trebuchet, Arial, sans-serif;
  font-weight: bold;
  cursor: pointer;
  border: 1px solid #ddd;
}

.flipswitch:after {
  position: absolute;
  top: 5%;
  display: block;
  line-height: 32px;
  width: 45%;
  height: 90%;
  background: #fff;
  box-sizing: border-box;
  text-align: center;
  transition: all 0.3s ease-in 0s;
  color: black;
  border: #888 1px solid;
  border-radius: 3px;
}

.flipswitch:after {
  left: 2%;
  content:"OFF";
}

.flipswitch:checked:after {
  left: 53%;
  content:"ON";
}
1
2
3
4
5
6
7
8
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">

Webkit friendly mobile-style checkbox/flipswitch
<input type="checkbox" class="flipswitch" /> &nbsp;
<span></span>

<input type="checkbox" checked="checked" class="flipswitch" /> &nbsp;
<span></span>

相关讨论

开始之前(截至2015年1月)

原来的问题和答案现在已经5岁了。因此，这只是一个小小的更新。

首先，在样式复选框方面有许多方法。基本原则是：

  • 您需要隐藏默认的复选框控件，该控件由您的浏览器设置样式，并且不能使用CSS以任何有意义的方式被覆盖。

  • 隐藏控件后，您仍然需要能够检测并切换其选中状态。

  • 复选框的选中状态需要通过设置新元素的样式来反映。

    • 解决办法(原则上)

    以上可以通过多种方法来完成——您经常会听到使用CSS3伪元素是正确的方法。实际上，没有真正正确或错误的方法，这取决于最适合您将在其中使用的上下文的方法。也就是说，我有一个更喜欢的。

  • 在label元素中包装您的复选框。这意味着即使当它被隐藏时，您仍然可以在单击标签内的任何位置时切换其选中状态。

  • 隐藏复选框

  • 在复选框后添加一个新元素，您将相应地设置样式。它必须出现在复选框之后，以便可以使用CSS进行选择，并根据:checked状态设置样式。CSS不能选择"向后"。

    • 解决方案(代码)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    label input {
      visibility: hidden;/* <-- hide the default checkbox, the rest is to hide and alllow tabbing, which display:none prevents */
      display:block;
      height:0;
      width:0;
      position:absolute;
      overflow:hidden;
    }
    label span {/* <-- style the artificial checkbox */
      height: 10px;
      width: 10px;
      border: 1px solid grey;
      display: inline-block;
    }
    [type=checkbox]:checked + span {/* <-- style its checked state */
      background: black;
    }
    1
    2
    3
    4
    5
    <label>
      <input type='checkbox'>
      <span></span>
      Checkbox label text
    </label>

    优化(使用图标)

    但是嘿！我听到你在喊。如果我想在框中显示一个漂亮的勾号或叉号呢？我不想使用背景图像！

    好吧，这就是CSS3的伪元素可以发挥作用的地方。这些支持content属性，允许您插入代表任一状态的Unicode图标。或者，您也可以使用第三方字体图标源，如字体Awesome(但请确保还将相关的font-family设置为FontAwesome)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    label input {
      display: none; /* hide the default checkbox */
    }

    /* style the artificial checkbox */
    label span {
      height: 10px;
      width: 10px;
      border: 1px solid grey;
      display: inline-block;
      position: relative;
    }

    /* style its checked state..with a ticked icon */
    [type=checkbox]:checked + span:before {
      content: '\2714';
      position: absolute;
      top: -5px;
      left: 0;
    }
    1
    2
    3
    4
    5
    <label>
      <input type='checkbox'>
      <span></span>
      Checkbox label text
    </label>

    相关讨论

    我会按照SW4答案的建议隐藏复选框并用自定义范围覆盖它，建议使用此HTML

    1
    2
    3
    4
    <label>
      <input type="checkbox">
      <span>send newsletter</span>
    </label>

    包装标签整齐地允许点击文本而不需要"for id"属性链接。然而，

    不要用visibility: hidden或display: none隐藏它。

    它可以通过点击或点击来工作，但这是一种使用复选框的蹩脚方法。有些人仍然使用更有效的tabkbbd来移动焦点，spacebkbd来激活，用这个方法隐藏会禁用它。如果表单很长，就可以节省一个人的手腕来使用tabindex或accesskey属性。如果观察系统复选框的行为，鼠标悬停时会有一个不错的阴影。样式良好的复选框应该遵循此行为。

    Cobberboy的答案推荐字体Awesome，这通常比位图好，因为字体是可伸缩的向量。使用上面的HTML，我建议使用以下CSS规则：

  • 隐藏复选框

    1
    2
    3
    4
    5
    input[type="checkbox"] {
      position: absolute;
      opacity: 0;
      z-index: -1;
    }

    我只使用了负的z-index，因为我的示例使用了足够大的复选框皮肤来完全覆盖它。我不建议使用left: -999px，因为它不可在每个布局中重用。bushan wagh的答案提供了一种防弹的方法来隐藏它，并说服浏览器使用tabindex，因此它是一个很好的选择。不管怎样，这两个都只是一个黑客。今天的正确方式是appearance: none，见joost的答案：

    1
    2
    3
    4
    5
    input[type="checkbox"] {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
    }

  • 样式复选框标签

    1
    2
    3
    4
    input[type="checkbox"] + span {
      font: 16pt sans-serif;
      color: #000;
    }

  • 添加复选框外观

    1
    2
    3
    4
    5
    6
    7
    8
    input[type="checkbox"] + span:before {
      font: 16pt FontAwesome;
      content: '\00f096';
      display: inline-block;
      width: 16pt;
      padding: 2px 0 0 3px;
      margin-right: 0.5em;
    }

    \00f096是字体Awesome的square-o，填充被调整为在焦点上提供均匀的虚线轮廓(见下文)。

  • 添加复选框选中的外观

    1
    2
    3
    input[type="checkbox"]:checked + span:before {
      content: '\00f046';
    }

    \00f046是sowest字体的check-square-o，与square-o的宽度不同，这就是上面宽度样式的原因。

  • 添加焦点轮廓

    1
    2
    3
    input[type="checkbox"]:focus + span:before {
      outline: 1px dotted #aaa;
    }

    Safari不提供此功能(请参见@jason sankey的评论)，您应该使用window.navigator检测浏览器，如果是Safari，则跳过它。

  • "为禁用设置灰色"复选框

    1
    2
    3
    input[type="checkbox"]:disabled + span {
      color: #999;
    }

  • "设置非禁用的悬停阴影"复选框

    1
    2
    3
    input[type="checkbox"]:not(:disabled) + span:hover:before {
      text-shadow: 0 1px 2px #77F;
    }

    • 演示小提琴

    尝试将鼠标悬停在复选框上，并使用t和shift+t移动，使用spacebkbd切换。

    相关讨论

    您可以使用label元素对复选框进行样式设置，其中一个示例如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    .checkbox > input[type=checkbox] {
      visibility: hidden;
    }

    .checkbox {
      position: relative;
      display: block;
      width: 80px;
      height: 26px;
      margin: 0 auto;
      background: #FFF;
      border: 1px solid #2E2E2E;
      border-radius: 2px;
      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
    }

    .checkbox:after {
      position: absolute;
      display: inline;
      right: 10px;
      content: 'no';
      color: #E53935;
      font: 12px/26px Arial, sans-serif;
      font-weight: bold;
      text-transform: capitalize;
      z-index: 0;
    }

    .checkbox:before {
      position: absolute;
      display: inline;
      left: 10px;
      content: 'yes';
      color: #43A047;
      font: 12px/26px Arial, sans-serif;
      font-weight: bold;
      text-transform: capitalize;
      z-index: 0;
    }

    .checkbox label {
      position: absolute;
      display: block;
      top: 3px;
      left: 3px;
      width: 34px;
      height: 20px;
      background: #2E2E2E;
      cursor: pointer;
      transition: all 0.5s linear;
      -webkit-transition: all 0.5s linear;
      -moz-transition: all 0.5s linear;
      border-radius: 2px;
      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
      z-index: 1;
    }

    .checkbox input[type=checkbox]:checked + label {
      left: 43px;
    }
    1
    2
      <input id="checkbox1" type="checkbox" value="1" />
      <label for="checkbox1"></label>

    以及上面代码的小提琴。请注意，有些CSS在旧版本的浏览器中不起作用，但我敢肯定有一些奇特的javascript示例！

    相关讨论

    易于实施和定制的解决方案

    经过大量的搜索和测试，我得到了这个易于实现和定制的解决方案。在此解决方案中：

  • 您不需要外部库和文件
  • 您不需要添加页面中的额外HTML
  • 您不需要更改复选框名称身份证

    • 简单地将流动的CSS放在页面顶部，所有复选框样式都将发生如下变化：

    enter image description here

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    input[type=checkbox] {
      transform: scale(1.5);
    }

    input[type=checkbox] {
      width: 30px;
      height: 30px;
      margin-right: 8px;
      cursor: pointer;
      font-size: 17px;
      visibility: hidden;
    }

    input[type=checkbox]:after {
      content:"";
      background-color: #fff;
      display: inline-block;
      margin-left: 10px;
      padding-bottom: 5px;
      color: #00BFF0;
      width: 22px;
      height: 25px;
      visibility: visible;
      border: 1px solid #00BFF0;
      padding-left: 3px;
      border-radius: 5px;
    }

    input[type=checkbox]:checked:after {
      content:"\2714";
      padding: -5px;
      font-weight: bold;
    }
    相关讨论

    您可以避免添加额外的标记。通过设置css appearance，除了桌面的IE(但在Windows Phone和Microsoft Edge的IE中)外，其他地方都可以使用：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    input[type="checkbox"] {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;

      /* Styling checkbox */
      width: 16px;
      height: 16px;
      background-color: red;
    }

    input[type="checkbox"]:checked {
      background-color: green;
    }
    1
    <input type="checkbox" />

    相关讨论

    我更喜欢使用图标字体(如fontawome)，因为使用CSS很容易修改颜色，而且在高像素密度的设备上缩放效果很好。这里是另一个纯粹的CSS变体，使用与上面类似的技术。

    (以下是静态图像，因此您可以可视化结果；有关交互式版本，请参阅jsFiddle)

    checkbox example

    与其他解决方案一样，它使用label元素。相邻的span保留了我们的复选框字符。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    span.bigcheck-target {
      font-family: FontAwesome; /* use an icon font for the checkbox */
    }

    input[type='checkbox'].bigcheck {
      position: relative;
      left: -999em; /* hide the real checkbox */
    }

    input[type='checkbox'].bigcheck + span.bigcheck-target:after {
      content:"\f096"; /* In fontawesome, is an open square (fa-square-o) */
    }

    input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after {
      content:"\f046"; /* fontawesome checked box (fa-check-square-o) */
    }

    /* ==== optional - colors and padding to make it look nice === */
    body {
      background-color: #2C3E50;
      color: #D35400;
      font-family: sans-serif;
      font-weight: 500;
      font-size: 4em; /* set this to whatever size you want */
    }

    span.bigcheck {
      display: block;
      padding: 0.5em;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

    <span class="bigcheck">
      <label class="bigcheck">
        Cheese
        <input type="checkbox" class="bigcheck" name="cheese" value="yes" />
        <span class="bigcheck-target"></span>
      </label>
    </span>

    这是给你的琴。

    相关讨论

    这是一篇相当古老的文章，但最近我发现了一个非常有趣的解决问题的方法。

    您可以使用appearance: none;关闭复选框his的默认样式，然后像这里描述的那样编写自己的样式(示例4)。

    实例小提琴

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    input[type=checkbox] {
      width: 23px;
      height: 23px;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      margin-right: 10px;
      background-color: #878787;
      outline: 0;
      border: 0;
      display: inline-block;
      -webkit-box-shadow: none !important;
      -moz-box-shadow: none !important;
      box-shadow: none !important;
    }

    input[type=checkbox]:focus {
      outline: none;
      border: none !important;
      -webkit-box-shadow: none !important;
      -moz-box-shadow: none !important;
      box-shadow: none !important;
    }

    input[type=checkbox]:checked {
      background-color: green;
      text-align: center;
      line-height: 15px;
    }
    1
    <input type="checkbox">

    不幸的是，浏览器支持对于我的个人测试中的appearance选项是非常糟糕的，我只让opera和chrome正常工作。但当更好的支持出现或您只想使用Chrome/Opera时，这将是保持简单的方法。

    "我能用吗？"链接

    相关讨论

    从我的谷歌搜索，这是最简单的方式为复选框样式。只需根据您的设计添加：after和：checked：after css。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    body{
      background: #DDD;
    }
    span{
      margin-left: 30px;
    }
    input[type=checkbox] {
        cursor: pointer;
        font-size: 17px;
        visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
        transform: scale(1.5);
    }

    input[type=checkbox]:after {
        content:"";
        background-color: #fff;
        display: inline-block;
        color: #00BFF0;
        width: 14px;
        height: 19px;
        visibility: visible;
        border: 1px solid #FFF;
        padding: 0 3px;
        margin: 2px 0;
        border-radius: 8px;
        box-shadow: 0 0 15px 0 rgba(0,0,0,0.08), 0 0 2px 0 rgba(0,0,0,0.16);
    }

    input[type=checkbox]:checked:after {
        content:"\2714";
        display: unset;
        font-weight: bold;
    }
    1
    <input type="checkbox"> <span>Select Text</span>

    相关讨论

    这里有一个简单的CSS解决方案，没有jquery或javascript

    我正在使用fontawsome图标，但您可以使用任何图像

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    input[type=checkbox] {
      display: inline-block;
      font-family: FontAwesome;
      font-style: normal;
      font-weight: normal;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      visibility: hidden;
      font-size: 14px;
    }

    input[type=checkbox]:before {
      content: @fa-var-square-o;
      visibility: visible;
      /*font-size: 12px;*/
    }

    input[type=checkbox]:checked:before {
      content: @fa-var-check-square-o;
    }
    相关讨论

    我的解决方案

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    input[type="checkbox"] {
      cursor: pointer;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      outline: 0;
      background: lightgray;
      height: 16px;
      width: 16px;
      border: 1px solid white;
    }

    input[type="checkbox"]:checked {
      background: #2aa1c0;
    }

    input[type="checkbox"]:hover {
      filter: brightness(90%);
    }

    input[type="checkbox"]:disabled {
      background: #e6e6e6;
      opacity: 0.6;
      pointer-events: none;
    }

    input[type="checkbox"]:after {
      content: '';
      position: relative;
      left: 40%;
      top: 20%;
      width: 15%;
      height: 40%;
      border: solid #fff;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
      display: none;
    }

    input[type="checkbox"]:checked:after {
      display: block;
    }

    input[type="checkbox"]:disabled:after {
      border-color: #7b7b7b;
    }
    1
    2
    3
    4
    <input type="checkbox">
    <input type="checkbox" checked>
    <input type="checkbox" disabled>
    <input type="checkbox" disabled checked>

    相关讨论

    我认为最简单的方法是设计一个label并使checkbox隐形。

    HTML

    1
    2
    <input type="checkbox" id="first" />
    <label for="first">&nbsp;</label>

    CSS

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    checkbox {
      display: none;
    }

    checkbox + label {
      /* Style for checkbox normal */
      width: 16px;
      height: 16px;
    }

    checkbox::checked + label,
    label.checked {
      /* Style for checkbox checked */
    }

    checkbox即使是隐藏的，仍然可以访问，它的值将在提交表单时发送。对于旧浏览器，您可能需要将label的类更改为使用javascript进行检查，因为我认为旧版本的ie不理解checkbox上的::checked。

    相关讨论

    伊克斯！所有这些解决方法都让我得出这样的结论：如果你想设计样式，HTML复选框有点糟糕。

    作为一个预警，这不是一个CSS实现。我只是想分享我想出的解决方案，以防其他人发现它有用。

    我使用了html5 canvas元素。

    这样做的好处是，您不必使用外部图像，可能可以节省一些带宽。

    缺点是，如果一个浏览器由于某种原因不能正确地呈现它，那么就没有回退。尽管这在2017年是否仍然是一个问题仍存在争议。

    更新

    我发现旧代码很难看，所以我决定重写它。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    Object.prototype.create = function(args){
        var retobj = Object.create(this);

        retobj.constructor(args || null);

        return retobj;
    }

    var Checkbox = Object.seal({
        width: 0,
        height: 0,
        state: 0,
        document: null,
        parent: null,
        canvas: null,
        ctx: null,

        /*
         * args:
         * name      default             desc.
         *
         * width     15                  width
         * height    15                  height
         * document  window.document     explicit document reference
         * target    this.document.body  target element to insert checkbox into
         */
        constructor: function(args){
            if(args === null)
                args = {};

            this.width = args.width || 15;
            this.height = args.height || 15;
            this.document = args.document || window.document;
            this.parent = args.target || this.document.body;
            this.canvas = this.document.createElement("canvas");
            this.ctx = this.canvas.getContext('2d');

            this.canvas.width = this.width;
            this.canvas.height = this.height;
            this.canvas.addEventListener("click", this.ev_click(this), false);
            this.parent.appendChild(this.canvas);
            this.draw();
        },

        ev_click: function(self){
            return function(unused){
                self.state = !self.state;
                self.draw();
            }
        },

        draw_rect: function(color, offset){
            this.ctx.fillStyle = color;
            this.ctx.fillRect(offset, offset,
                    this.width - offset * 2, this.height - offset * 2);
        },

        draw: function(){
            this.draw_rect("#CCCCCC", 0);
            this.draw_rect("#FFFFFF", 1);

            if(this.is_checked())
                this.draw_rect("#000000", 2);
        },

        is_checked: function(){
            return !!this.state;
        }
    });

    这是一个有效的演示。

    新版本使用原型和差异继承来创建一个有效的系统来创建复选框。要创建复选框：

    1
    var my_checkbox = Checkbox.create();

    这将立即将复选框添加到DOM并挂接事件。要查询是否选中复选框：

    1
    my_checkbox.is_checked(); // true if checked, else false

    另外需要注意的是，我去掉了这个循环。

    更新2

    在上一次更新中，我忽略了一点，那就是使用画布比只制作一个复选框更有优势，不管你想让它看起来怎样。如果愿意，还可以创建多状态复选框。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    Object.prototype.create = function(args){
        var retobj = Object.create(this);

        retobj.constructor(args || null);

        return retobj;
    }

    Object.prototype.extend = function(newobj){
        var oldobj = Object.create(this);

        for(prop in newobj)
            oldobj[prop] = newobj[prop];

        return Object.seal(oldobj);
    }

    var Checkbox = Object.seal({
        width: 0,
        height: 0,
        state: 0,
        document: null,
        parent: null,
        canvas: null,
        ctx: null,

        /*
         * args:
         * name      default             desc.
         *
         * width     15                  width
         * height    15                  height
         * document  window.document     explicit document reference
         * target    this.document.body  target element to insert checkbox into
         */
        constructor: function(args){
            if(args === null)
                args = {};

            this.width = args.width || 15;
            this.height = args.height || 15;
            this.document = args.document || window.document;
            this.parent = args.target || this.document.body;
            this.canvas = this.document.createElement("canvas");
            this.ctx = this.canvas.getContext('2d');

            this.canvas.width = this.width;
            this.canvas.height = this.height;
            this.canvas.addEventListener("click", this.ev_click(this), false);
            this.parent.appendChild(this.canvas);
            this.draw();
        },

        ev_click: function(self){
            return function(unused){
                self.state = !self.state;
                self.draw();
            }
        },

        draw_rect: function(color, offsetx, offsety){
            this.ctx.fillStyle = color;
            this.ctx.fillRect(offsetx, offsety,
                    this.width - offsetx * 2, this.height - offsety * 2);
        },

        draw: function(){
            this.draw_rect("#CCCCCC", 0, 0);
            this.draw_rect("#FFFFFF", 1, 1);
            this.draw_state();
        },

        draw_state: function(){
            if(this.is_checked())
                this.draw_rect("#000000", 2, 2);
        },

        is_checked: function(){
            return this.state == 1;
        }
    });

    var Checkbox3 = Checkbox.extend({
        ev_click: function(self){
            return function(unused){
                self.state = (self.state + 1) % 3;
                self.draw();
            }
        },

        draw_state: function(){
            if(this.is_checked())
                this.draw_rect("#000000", 2, 2);

            if(this.is_partial())
                this.draw_rect("#000000", 2, (this.height - 2) / 2);
        },

        is_partial: function(){
            return this.state == 2;
        }
    });

    我稍微修改了最后一个代码片段中使用的Checkbox，使其更通用，从而可以使用具有3个状态的复选框"扩展"它。这是一个演示。如您所见，它已经比内置复选框具有更多的功能。

    在JavaScript和CSS之间进行选择时需要考虑的问题。

    旧的、设计不良的代码

    工作演示

    首先，设置画布

    1
    2
    3
    4
    5
    6
    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d'),
        checked = 0; // The state of the checkbox
    canvas.width = canvas.height = 15; // Set the width and height of the canvas
    document.body.appendChild(canvas);
    document.body.appendChild(document.createTextNode(' Togglable Option'));

    接下来，设计一种让画布自我更新的方法。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    (function loop(){
      // Draws a border
      ctx.fillStyle = '#ccc';
      ctx.fillRect(0,0,15,15);
      ctx.fillStyle = '#fff';
      ctx.fillRect(1,1,13,13);
      // Fills in canvas if checked
      if(checked){
        ctx.fillStyle = '#000';
        ctx.fillRect(2,2,11,11);
      }
      setTimeout(loop,1000/10); // refresh 10 times per second
    })();

    最后一部分是使其具有交互性。幸运的是，这很简单：

    1
    2
    3
    canvas.onclick = function(){
      checked = !checked;
    }

    这就是IE中可能存在问题的地方，因为它们在JavaScript中有奇怪的事件处理模型。

    我希望这能帮助别人，它绝对适合我的需要。

    相关讨论

    使用普通CSS3修改复选框样式，不需要任何JS&HTML操作。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    .form input[type="checkbox"]:before {
      display: inline-block;
      font: normal normal normal 14px/1 FontAwesome;
      font-size: inherit;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      content:"\f096";
      opacity: 1 !important;
      margin-top: -25px;
      appearance: none;
      background: #fff;
    }

    .form input[type="checkbox"]:checked:before {
      content:"\f046";
    }

    .form input[type="checkbox"] {
      font-size: 22px;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
    }
    1
    2
    3
    4
    5
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

    <form class="form">
      <input type="checkbox" />
    </form>

    相关讨论

    一个简单而轻量级的模板：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    input[type=checkbox] {
      cursor: pointer;
    }

    input[type=checkbox]:checked:before {
      content:"\2713";
      background: #fffed5;
      text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
      font-size: 20px;
      text-align: center;
      line-height: 8px;
      display: inline-block;
      width: 13px;
      height: 15px;
      color: #00904f;
      border: 1px solid #cdcdcd;
      border-radius: 4px;
      margin: -3px -3px;
      text-indent: 1px;
    }

    input[type=checkbox]:before {
      content:"\202A";
      background: #ffffff;
      text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
      font-size: 20px;
      text-align: center;
      line-height: 8px;
      display: inline-block;
      width: 13px;
      height: 15px;
      color: #00904f;
      border: 1px solid #cdcdcd;
      border-radius: 4px;
      margin: -3px -3px;
      text-indent: 1px;
    }
    1
    2
    3
    4
    5
    6
    <input type="checkbox" checked="checked">checked1
    <input type="checkbox">unchecked2
    <input type="checkbox" checked="checked" id="id1">
    <label for="id1">checked2+label</label>
    <label for="id2">unchecked2+label+rtl</label>
    <input type="checkbox" id="id2">

    网址：https://jsfiddle.net/rvgccn5b/

    相关讨论

    No JavaScript or Jquery required.

    更改复选框样式的简单方法。

    HTML

    1
    2
    <input type="checkbox" id="option" />
    <label for="option"> <span></span> Click me </label>

    CSS

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    input[type="checkbox"] {
      display: none;
      border: none !important;
      box-shadow: none !important;
    }

    input[type="checkbox"] + label span {
      background: url(http://imgh.us/uncheck.png);
      width: 49px;
      height: 49px;
      display: inline-block;
      vertical-align: middle;
    }

    input[type="checkbox"]:checked + label span {
      background: url(http://imgh.us/check_2.png);
      width: 49px;
      height: 49px;
      vertical-align: middle;
    }

    这里是jsFiddle链接：https://jsFiddle.net/05y2bge3e3/

    这里是一个仅支持css/html的版本，根本不需要jquery或javascript，简单而干净的html，以及非常简单和简短的css。

    这是J小提琴

    http://jsfiddle.net/v71kn3pr/

    这是HTML

    1
    2
    3
        <input type="checkbox" name="myCheckbox" id="myCheckbox_01_item" value="red" />
        <label for="myCheckbox_01_item" class="box"></label>
        <label for="myCheckbox_01_item" class="text">I accept the Terms of Use.</label>

    这里是CSS

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    #myContainer {
        outline: black dashed 1px;
        width: 200px;
    }
    #myContainer input[type="checkbox"][name="myCheckbox"] {
        display: none;
    }
    #myContainer input[type="checkbox"][name="myCheckbox"]:not(:checked) + label.box {
        display: inline-block;
        width: 25px;
        height: 25px;
        border: black solid 1px;
        background: #FFF ;
        margin: 5px 5px;
    }
    #myContainer input[type="checkbox"][name="myCheckbox"]:checked + label.box {
        display: inline-block;
        width: 25px;
        height: 25px;
        border: black solid 1px;
        background: #F00;
        margin: 5px 5px;
    }
    #myContainer input[type="checkbox"][name="myCheckbox"] + label + label.text {
        font: normal 12px arial;
        display: inline-block;
        line-height: 27px;
        vertical-align: top;
        margin: 5px 0px;
    }

    这可以调整为能够有单独的收音机或复选框，复选框组和收音机按钮组以及。

    这个HTML/CSS允许你同时捕获点击标签，所以复选框将被选中和取消选中，即使你只是点击标签。

    这种类型的复选框/单选按钮适用于任何表单，完全没有问题。已经使用PHP、ASPX、JavaFaces和ColdFusion进行了测试。

    这是最简单的方法，您可以选择提供此样式的复选框。

    CSS：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    .check-box input {
      display: none;
    }

    .check-box span:before {
      content: ' ';
      width: 20px;
      height: 20px;
      display: inline-block;
      background: url("unchecked.png");
    }

    .check-box input:checked + span:before {
      background: url("checked.png");
    }

    HTML：

    1
    2
    3
    4
    <label class="check-box">
      <input type="checkbox">
      <span>Check box Text</span>
    </label>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    input[type=checkbox].css-checkbox {
        position: absolute;
        overflow: hidden;
        clip: rect(0 0 0 0);
        height:1px;
        width:1px;
        margin:-1px;
        padding:0;
        border:0;
    }

    input[type=checkbox].css-checkbox + label.css-label {
        padding-left:20px;
        height:15px;
        display:inline-block;
        line-height:15px;
        background-repeat:no-repeat;
        background-position: 0 0;
        font-size:15px;
        vertical-align:middle;
        cursor:pointer;
    }

    input[type=checkbox].css-checkbox:checked + label.css-label {
        background-position: 0 -15px;
    }

    .css-label{
        background-image:url(http://csscheckbox.com/checkboxes/dark-check-green.png);
    }

    警告：在写作的时候，以下是正确的，但与此同时，事情有所进展。

    Afaik现代浏览器使用本机OS控件显示复选框，因此无法设置其样式。

    相关讨论

    因为像边缘和火狐这样的浏览器不支持：before:after-on复选框输入标签，这里有一个纯HTML和CSS的替代方案。当然，您应该根据自己的需求来编辑CSS。

    将HTML设置为如下复选框：

    1
    2
    3
    4
    5
        <input type='checkbox' />
        <label>
            <span></span>
            Checkbox label
        </label>

    将此样式应用于复选框以更改颜色标签

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    <style>
        .custom-checkbox {
            position: relative;
        }
        .custom-checkbox input{
            position: absolute;
            left: 0;
            top: 0;
            height:15px;
            width: 50px;    /* Expand the checkbox so that it covers */
            z-index : 1;    /* the label and span, increase z-index to bring it over */
            opacity: 0;     /* the label and set opacity to 0 to hide it. */
        }
        .custom-checkbox input+label {
            position: relative;
            left: 0;
            top: 0;
            padding-left: 25px;
            color: black;
        }
        .custom-checkbox input+label span {
            position: absolute;  /* a small box to display as checkbox */
            left: 0;
            top: 0;
            height: 15px;
            width: 15px;
            border-radius: 2px;
            border: 1px solid black;
            background-color: white;
        }
        .custom-checkbox input:checked+label { /* change label color when checked */
            color: orange;
        }
        .custom-checkbox input:checked+label span{ /* change span box color when checked */
            background-color: orange;
            border: 1px solid orange;
        }
    </style>

    似乎您只需使用CSS就可以更改复选框的灰度颜色。

    下面将复选框从黑色转换为灰色(这正是我想要的)：

    1
    2
    3
    input[type="checkbox"] {
        opacity: .5;
    }
    相关讨论

    不，您仍然不能设置复选框本身的样式，但我(最终)找到了如何设置幻象样式，同时保留单击复选框的功能。这意味着，即使光标不完全静止，您也可以切换它，而不会冒选择文本或触发拖放的风险！

    此解决方案可能也适用于单选按钮。

    以下是IE9、FF30.0和Chrome40.0.2214.91的基本示例。您仍然可以将它与背景图像和伪元素结合使用。

    http://jsfiddle.net/o0xo13yl/1/

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    label {
        display: inline-block;
        position: relative; /* needed for checkbox absolute positioning */
        background-color: #eee;
        padding: .5rem;
        border: 1px solid #000;
        border-radius: .375rem;
        font-family:"Courier New";
        font-size: 1rem;
        line-height: 1rem;
    }

    label > input[type="checkbox"] {
        display: block;
        position: absolute; /* remove it from the flow */
        width: 100%;
        height: 100%;
        margin: -.5rem; /* negative the padding of label to cover the"button" */
        cursor: pointer;
        opacity: 0; /* make it transparent */
        z-index: 666; /* place it on top of everything else */
    }

    label > input[type="checkbox"] + span {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        border: 1px solid #000;
        margin-right: .5rem;
    }

    label > input[type="checkbox"]:checked + span {
        background-color: #666;
    }

    <label>
        <input type="checkbox" />
        <span>&nbsp;</span>Label text
    </label>

    对于纯CSS，没有什么特别之处：before和：after，没有转换，您可以关闭默认外观，然后像下面的示例一样使用内联背景图像对其进行样式设置。它可以在Chrome、Firefox、Safari和Now Edge(Chromium Edge)中使用。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    INPUT[type=checkbox]:focus
    {
    outline:1px solid rgba(0,0,0,0.2);
    }

    INPUT[type=checkbox]
    {
    background-color: #DDD;
    border-radius: 2px;
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    width: 17px;
    height: 17px;
    cursor:pointer;
    position: relative;
    top: 5px;
    }

    INPUT[type=checkbox]:checked
    {
    background-color:#409fd6;
    background:#409fd6 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat;
    }
    1
    2
    3
    <form>
      <label><input type="checkbox"> I Agree To Terms &amp; Conditions</label>
    </form>

    你可以用ICheck它是为jquery&zepto定制的复选框和单选按钮，也许它可以帮助您

    确保在icheck.js之前加载jquery v1.7+。

  • 选择颜色方案，有10种不同的样式：
    • 黑色-最小.css
    • 红-铯
    • 绿色-绿色.css
    • 蓝色-蓝色.css
    • 航空-航空.css
    • 灰色-灰色.css
    • 橙色-橙色.css
    • 黄色-黄色.css
    • 粉红色-粉红色.css
    • 紫色-紫色.css
  • 将/skins/minimal/folder和icheck.js文件复制到您的站点。

  • 在HTML中插入before(替换路径和配色方案)：

    • 红色配色方案示例：

    1
    2
    <link href="your-path/minimal/red.css" rel="stylesheet">
    <script src="your-path/icheck.js">

  • 在HTML中添加一些复选框和单选按钮：

  • 将javascript添加到HTML以启动ICheck插件：

    1
    2
    3
    4
    5
    6
    7
        $(document).ready(function(){
          $('input').iCheck({
            checkboxClass: 'icheckbox_minimal',
            radioClass: 'iradio_minimal',
            increaseArea: '20%' // optional
          });
       });

  • 对于不同于黑色的配色方案，请使用此代码(例如红色)：

    1
    2
    3
    4
    5
    6
    7
        $(document).ready(function(){
          $('input').iCheck({
            checkboxClass: 'icheckbox_minimal-red',
            radioClass: 'iradio_minimal-red',
            increaseArea: '20%' // optional
          });
       });

  • 多恩

    • 快速修复在文本前面添加图标：

    1
    < asp:CheckBox... Text="<img src='/link/to/img.png' />My Text" />
    相关讨论