Html 如何使用 CSS 设置复选框样式

Question

提问by svirk

I am trying to style a checkbox using the following:

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

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

But the style is not applied. The checkbox still displays its default style. How do I give it the specified style?

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

Answer 1

采纳答案by Jacob Mattison

UPDATE:

更新：

The below answer references the state of things before widespread availability of CSS 3. In modern browsers (including Internet Explorer 9 and later) it is more straightforward to create checkbox replacements with your preferred styling, without using JavaScript.

下面的答案引用了 CSS 3 广泛可用之前的状态。在现代浏览器（包括 Internet Explorer 9 及更高版本）中，使用您喜欢的样式创建复选框替换更简单，而无需使用 JavaScript。

Here are some useful links:

以下是一些有用的链接：

It is worth noting that the fundamental issue has not changed. You still can't apply styles (borders, etc.) directly to the checkbox element and have those styles affect the display of the HTML checkbox. What has changed, however, is that it's now possible to hide the actual checkbox and replace it with a styled element of your own, using nothing but CSS. In particular, because CSS now has a widely supported :checkedselector, you can make your replacement correctly reflect the checked status of the box.

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

OLDER ANSWER

旧答案

Here's a useful article about styling checkboxes. Basically, that writer found that it varies tremendously from browser to browser, and that many browsers always display the default checkbox no matter how you style it. So there really isn't an easy way.

这是一篇关于样式复选框的有用文章。基本上，该作者发现它因浏览器而异，并且无论您如何设置样式，许多浏览器总是显示默认复选框。所以真的没有简单的方法。

It's not hard to imagine a workaround where you would use JavaScript to overlay an image on the checkbox and have clicks on that image cause the real checkbox to be checked. Users without JavaScript would see the default checkbox.

不难想象一种解决方法，您可以使用 JavaScript 在复选框上覆盖图像，然后单击该图像会导致选中真正的复选框。没有 JavaScript 的用户会看到默认复选框。

Edited to add: here's a nice script that does this for you; it hides the real checkbox element, replaces it with a styled span, and redirects the click events.

编辑添加：这是一个很好的脚本，可以为您执行此操作；它隐藏了真正的复选框元素，用样式化的跨度替换它，并重定向点击事件。

Answer 2

回答by Blake Pettersson

There is a way to do this using just CSS. We can (ab)use the labelelement and style that element instead. The caveat is that this will not work for Internet Explorer 8 and lower versions.

有一种方法可以仅使用 CSS 来做到这一点。我们可以（ab）使用该label元素并为该元素设置样式。需要注意的是，这不适用于 Internet Explorer 8 和更低版本。

.myCheckbox input {
  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");
}

<label for="test">Label for my styled "checkbox"</label>
<label class="myCheckbox">
  <input type="checkbox" name="test" />
  <span></span>
</label>

Answer 3

回答by Josh Mc

You can achieve quite a cool custom checkbox effect by using the new abilities that come with the :afterand :beforepseudo classes. The advantage to this, is: You don't need to add anything more to the DOM, just the standard checkbox.

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

Note this will only work for compatible browsers. I believe this is related to the fact that some browsers do not allow you to set :afterand :beforeon input elements. Which unfortunately means for the moment only WebKit browsers are supported. Firefox + Internet Explorer will still allow the checkboxes to function, just unstyled, and this will hopefully change in the future (the code does not use vendor prefixes).

请注意，这仅适用于兼容的浏览器。我相信这与某些浏览器不允许您设置:after和:before输入元素有关。不幸的是，这意味着目前仅支持 WebKit 浏览器。Firefox + Internet Explorer 仍然允许复选框运行，只是没有样式，这有望在未来改变（代码不使用供应商前缀）。

This is a WebKit browser solution only (Chrome, Safari, Mobile browsers)

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

See Example Fiddle

见示例小提琴

$(function() {
  $('input').change(function() {
    $('div').html(Math.random());
  });
});

/* 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%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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>

Bonus Webkit style flipswitch fiddle

Bonus Webkit 风格的拨动开关小提琴

$(function() {
  var f = function() {
    $(this).next().text($(this).is(':checked') ? ':checked' : ':not(:checked)');
  };
  $('input').change(f).trigger('change');
});

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";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

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

Answer 4

回答by SW4

Before you begin (as of Jan 2015)

开始之前（截至 2015 年 1 月）

The original question and answer are now ~5 years old. As such, this is a little bit of an update.

原来的问题和答案现在大约有 5 年了。因此，这是一个小小的更新。

Firstly, there are a number of approaches when it comes to styling checkboxes. the basic tenet is:

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

You will need to hide the default checkbox control which is styled by your browser, and cannot be overridden in any meaningful way using CSS.
With the control hidden, you will still need to be able to detect and toggle its checked state
The checked state of the checkbox will need to be reflected by styling a new element

您需要隐藏由浏览器设置样式的默认复选框控件，并且不能使用 CSS 以任何有意义的方式覆盖。
隐藏控件后，您仍然需要能够检测和切换其选中状态
复选框的选中状态需要通过样式化新元素来反映

The solution (in principle)

解决方案（原则上）

The above can be accomplished by a number of means - and you will often hear using CSS3 pseudo-elements is the right way. Actually, there is no real right or wrong way, it depends on the approach most suitable for the context you will be using it in. That said, I have a preferred one.

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

Wrap your checkbox in a labelelement. This will mean that even when it is hidden, you can still toggle its checked state on clicking anywhere within the label.
Hide your checkbox
Add a new element afterthe checkbox which you will style accordingly. It must appear after the checkbox so it can be selected using CSS and styled dependent on the :checkedstate. CSS cannot select 'backwards'.

将您的复选框包裹在一个label元素中。这意味着即使它处于隐藏状态，您仍然可以通过单击标签内的任意位置来切换其选中状态。
隐藏您的复选框
在复选框后添加一个新元素，您将相应地设置样式。它必须出现在复选框之后，以便可以使用 CSS 选择它并根据:checked状态设置样式。CSS 不能选择“向后”。

The solution (in code)

解决方案（在代码中）

label input {
  visibility: hidden;/* <-- Hide the default checkbox. The rest is to hide and allow 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;
}

<label>
  <input type='checkbox'>
  <span></span>
  Checkbox label text
</label>

Refinement (using icons)

细化（使用图标）

But hey! I hear you shout. What about if I want to show a nice little tick or cross in the box? And I don't want to use background images!

但是嘿！我听到你在喊。如果我想在框中显示一个漂亮的小勾或叉怎么办？而且我不想使用背景图片！

Well, this is where CSS3's pseudo-elements can come into play. These support the contentproperty which allows you to inject Unicode iconsrepresenting either state. Alternatively, you could use a third party font icon source such as font awesome (though make sure you also set the relevant font-family, e.g. to FontAwesome)

嗯，这就是 CSS3 的伪元素可以发挥作用的地方。这些支持content允许您注入代表任一状态的Unicode 图标的属性。或者，您可以使用第三方字体图标源，例如 font awesome （但请确保您还设置了相关的font-family，例如FontAwesome）

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: '14';
  position: absolute;
  top: -5px;
  left: 0;
}

<label>
  <input type='checkbox'>
  <span></span>
  Checkbox label text
</label>

Answer 5

回答by Jan Turoň

I'd follow the advice of SW4's answer– to hide the checkbox and to cover it with a custom span, suggesting this HTML:

我会按照SW4 的回答的建议- 隐藏复选框并用自定义跨度覆盖它，建议使用此 HTML：

<label>
  <input type="checkbox">
  <span>send newsletter</span>
</label>

The wrap in label neatly allows clicking the text without the need of "for-id" attribute linking. However,

标签中的换行整齐地允许单击文本而无需“for-id”属性链接。然而，

Do not hide it using `visibility: hidden`or `display: none`

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

It works by clicking or tapping, but that is a lame way to use checkboxes. Some people still use much more effective Tabto move focus, Spaceto activate, and hiding with that method disables it. If the form is long, one will save someone's wrists to use tabindexor accesskeyattributes. And if you observe the system checkbox behavior, there is a decent shadow on hover. The well styled checkbox should follow this behavior.

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

cobberboy's answerrecommends Font Awesomewhich is usually better than bitmap since fonts are scalable vectors. Working with the HTML above, I'd suggest these CSS rules:

cobberboy 的回答推荐Font Awesome，它通常比位图更好，因为字体是可缩放的矢量。使用上面的 HTML，我建议使用这些 CSS 规则：

Hide checkboxes
```
input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
```
I use just negative z-indexsince my example uses big enough checkbox skin to cover it fully. I don't recommend left: -999pxsince it is not reusable in every layout. Bushan wagh's answerprovides a bulletproof way to hide it and convince the browser to use tabindex, so it is a good alternative. Anyway, both is just a hack. The proper way today is appearance: none, see Joost's answer:
```
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
```

Style checkbox label

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

Add checkbox skin

input[type="checkbox"] + span:before {
  font: 16pt FontAwesome;
  content: 'input[type="checkbox"]:checked + span:before {
  content: 'input[type="checkbox"]:focus + span:before {
  outline: 1px dotted #aaa;
}
f046';
}
f096';
  display: inline-block;
  width: 16pt;
  padding: 2px 0 0 3px;
  margin-right: 0.5em;
}

\00f096is Font Awesome's square-o, padding is adjusted to provide even dotted outline on focus (see below).

Add checkbox checked skin
```
input[type="checkbox"]:disabled + span {
  color: #999;
}
```
\00f046is Font Awesome's check-square-o, which is not the same width as square-o, which is the reason for the width style above.
Add focus outline
```
input[type="checkbox"]:not(:disabled) + span:hover:before {
  text-shadow: 0 1px 2px #77F;
}
```
Safari doesn't provide this feature (see @Jason Sankey's comment), you should use window.navigatorto detect the browser and skip it if it is Safari.

Set gray color for disabled checkbox

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

Set hover shadow on non-disabled checkbox

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

隐藏复选框

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

我只使用负数，z-index因为我的示例使用了足够大的复选框皮肤来完全覆盖它。我不推荐，left: -999px因为它不能在每个布局中重复使用。Bushan wagh 的答案提供了一种防弹方法来隐藏它并说服浏览器使用 tabindex，因此它是一个不错的选择。无论如何，两者都只是一个黑客。今天的正确方法是appearance: none，请参阅Joost 的回答：

input[type="checkbox"] + span:before {
  font: 16pt FontAwesome;
  content: 'input[type="checkbox"]:checked + span:before {
  content: 'input[type="checkbox"]:focus + span:before {
  outline: 1px dotted #aaa;
}
f046';
}
f096';
  display: inline-block;
  width: 16pt;
  padding: 2px 0 0 3px;
  margin-right: 0.5em;
}

样式复选框标签

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

添加复选框皮肤
```
input[type="checkbox"]:not(:disabled) + span:hover:before {
  text-shadow: 0 1px 2px #77F;
}
```
\00f096是 Font Awesome 的square-o，调整填充以在焦点上提供均匀的虚线轮廓（见下文）。

添加复选框选中的皮肤

.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;
}

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

添加焦点轮廓
```
<div class="checkbox">
  <input id="checkbox1" type="checkbox" value="1" />
  <label for="checkbox1"></label>
</div>
```
Safari 不提供此功能（请参阅@Jason Sankey 的评论），您应该使用它window.navigator来检测浏览器并跳过它（如果它是 Safari）。

为禁用的复选框设置灰色

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: "14";
  padding: -5px;
  font-weight: bold;
}

在非禁用复选框上设置悬停阴影

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;
}

Demo Fiddle

演示小提琴

Try to hover the mouse over the checkboxes and use Taband Shift+Tabto move and Spaceto toggle.

尝试将鼠标悬停在复选框上并使用Tab和Shift+Tab移动和Space切换。

Answer 6

回答by Jake

You can style checkboxes with a little trickery using the labelelement an example is below:

您可以使用label下面的示例通过一些技巧来设置复选框的样式：

<input type="checkbox" />

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;
}

And a FIDDLEfor the above code. Note that some CSS doesn't work in older versions of browsers, but I'm sure there are some fancy JavaScript examples out there!

以及上面代码的小提琴。请注意，某些 CSS 在旧版本的浏览器中不起作用，但我确信那里有一些精美的 JavaScript 示例！

Answer 7

回答by Mohamed Nor

Simple to implement and easily customizable solution

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

After a lot of search and testing I got this solution which is simple to implement and easier to customize. In this solution:

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

You don't need external libraries and files
You don't need to add extra HTML in your page
You don't need to change checkbox names and id

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

Simple put the flowing CSS at the top of your page and all checkboxes style will change like this:

简单地将流动的 CSS 放在页面顶部，所有复选框样式都会像这样改变：

<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>

Answer 8

回答by Vadim Ovchinnikov

You can avoid adding extra markup. This works everywhere except IE for Desktop (but works in IE for Windows Phone and Microsoft Edge) via setting CSS appearance:

您可以避免添加额外的标记。这适用于桌面版 IE（但适用于 Windows Phone 和 Microsoft Edge 的 IE），通过设置 CSS appearance：

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;
}

<input type="checkbox">

Answer 9

回答by cobberboy

I prefer to use icon fonts (such as FontAwesome) since it's easy to modify their colours with CSS, and they scale really well on high pixel-density devices. So here's another pure CSS variant, using similar techniques to those above.

我更喜欢使用图标字体（例如 FontAwesome），因为使用 CSS 修改它们的颜色很容易，而且它们在高像素密度设备上的缩放效果非常好。所以这是另一个纯 CSS 变体，使用与上述类似的技术。

(Below is a static image so you can visualize the result; see the JSFiddlefor an interactive version.)

（下面是一个静态图像，因此您可以将结果可视化；有关交互式版本，请参阅JSFiddle。）

Checkbox example

As with other solutions, it uses the labelelement. An adjacent spanholds our checkbox character.

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

##代码## ##代码##

Here's the JSFiddlefor it.

这是它的JSFiddle。

Answer 10

回答by Joost

Recently I found a quite interesting solution to the problem.

最近我发现了一个非常有趣的解决方案。

You could use appearance: none;to turn off the checkbox's default style and then write your own over it like described here (Example 4).

您可以使用appearance: none;关闭复选框的默认样式，然后按照此处的描述（示例 4）编写您自己的样式。

Example fiddle

示例小提琴

##代码## ##代码##

Unfortunately browser support is quite bad for the appearanceoption. From my personal testing I only got Opera and Chrome working correctly. But this would be the way to go to keep it simple when better support comes or you only want to use Chrome/Opera.

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

"Can I use?" link

“我可以用吗？” 关联

Html 如何使用 CSS 设置复选框样式

提问by svirk

采纳答案by Jacob Mattison

回答by Blake Pettersson

回答by Josh Mc

回答by SW4

Before you begin (as of Jan 2015)

开始之前（截至 2015 年 1 月）

The solution (in principle)

解决方案（原则上）

The solution (in code)

解决方案（在代码中）

Refinement (using icons)

细化（使用图标）

回答by Jan Turoň

Do not hide it using `visibility: hidden`or `display: none`

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

Demo Fiddle

演示小提琴

回答by Jake

回答by Mohamed Nor

Simple to implement and easily customizable solution

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

回答by Vadim Ovchinnikov

回答by cobberboy

回答by Joost

相关推荐

最近更新

标签

Html 如何使用 CSS 设置复选框样式

提问by svirk

采纳答案by Jacob Mattison

回答by Blake Pettersson

回答by Josh Mc

回答by SW4

Before you begin (as of Jan 2015)

开始之前（截至 2015 年 1 月）

The solution (in principle)

解决方案（原则上）

The solution (in code)

解决方案（在代码中）

Refinement (using icons)

细化（使用图标）

回答by Jan Turoň

Do not hide it using visibility: hiddenor display: none

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

Demo Fiddle

演示小提琴

回答by Jake

回答by Mohamed Nor

Simple to implement and easily customizable solution

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

回答by Vadim Ovchinnikov

回答by cobberboy

回答by Joost

相关推荐

为什么 Bootstrap 网格布局比 HTML 表格更可取？

Html 如何适应表格单元格中的文本框

表单之外的按钮 html 标签是否有效？

Html 是否可以设置 html5 音频标签的样式？

相关推荐

最近更新

标签

Do not hide it using `visibility: hidden`or `display: none`

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