使用 CSS 的自定义样式复选框（无引导程序）

Question

如何仅使用 CSS 设置复选框样式？我想要具有我选择的背景颜色的复选框，并在它们被选中时出现一个十字标记，而不是一个复选标记。

Answer 1

/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
  position: relative;
  padding-left: 1.95em;
  cursor: pointer;
}

/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 1.25em; height: 1.25em;
  border: 2px solid #ccc;
  background: #fff;
  border-radius: 4px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
  content: '✔';
  position: absolute;
  top: .1em; left: .3em;
  font-size: 1.3em;
  line-height: 0.8;
  color: #09ad7e;
  transition: all .2s;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}
[type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}
[type="checkbox"]:disabled:checked + label:after {
  color: #999;
}
[type="checkbox"]:disabled + label {
  color: #aaa;
}
/* accessibility */
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before {
  border: 2px dotted blue;
}

/* hover style just for information */
label:hover:before {
  border: 2px solid #4778d9!important;
}


body {
  font-family: "Open sans", "Segoe UI", "Segoe WP", Helvetica, Arial, sans-serif;
  color: #777;
}
h1, h2 {
  margin-bottom: .25em;
  font-weight: normal;
  text-align: center;
}
h2 {
  margin: .25em 0 2em;
  color: #aaa;
}
form {
  width: 7em;
  margin: 0 auto;
}
.txtcenter {
  margin-top: 4em;
  font-size: .9em;
  text-align: center;
  color: #aaa;
}
.copy {
 margin-top: 2em; 
}
.copy a {
 text-decoration: none;
 color: #4778d9;
}

<form action="#">
  <p>
    <input type="checkbox" id="test1" />
    <label for="test1">India</label>
  </p>
  <p>
    <input type="checkbox" id="test2" checked="checked" />
    <label for="test2">USA</label>
  </p>
  <p>
    <input type="checkbox" id="test3" checked="checked" />
    <label for="test3">Japan</label>
  </p>

</form>

Answer 2

<div class="checkbox">
  <input name="filter_price0" id="offer_407" type="checkbox" value="407" hidden >
  <label for="offer_407">
     Below 500 Rs
  </label>
</div>

<style>
    .checkbox input[type="checkbox"]:checked + label:before {
        background-color: #424242;
        border-color: #424242;
         content: "\2713";
         display: inline-block;
         text-align: center;
         color:#fff;
    }
    li{
      list-style-type:none;
      margin-top:10px;
    }
    .checkbox label{
      cursor:pointer;
    }
    .checkbox label:before {
        content: "";
        cursor:pointer;
        display: inline-block;
        position: absolute;
        width: 20px;
        height: 20px;
        left: 0;
        border: 1px solid #cccccc;
        background-color: #fff;
        -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
        -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
        transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    }
  </style>

demo可以点这里 fiddle demo，下次贴一些你试过的代码

Answer 3

有同样的问题 - 找到了一个很好的解决方案 - 查看 Stackoverflow 中的答案 - 没有人有这个好技巧。

在这里

input[type=checkbox].agb {
all: unset;
/* rest of styles here */
}

它将所有浏览器生成的 css 样式设置为无，您可以从头开始设置复选框的样式，就像您想要的那样，没有任何标签黑客或其他东西。

酷吗？

我会给你一个我的一个简单的自定义复选框的例子。

input[type=checkbox].agb {
    all: unset;
    width: 32px;
    height: 32px;
    margin-right: 5px;
    display: block;
    background: var(--color-2);
    float: left;
}

input[type=checkbox].agb:checked {
    background: var(--color-4);
    color: var(--color-2)
}

input[type=checkbox].agb:checked::after {
    content: "✔";
    display: block;
    font-size: 26px;
    padding-left: 5px;
}