纯 CSS 复选框图像替换答案

【问题标题】：Pure CSS checkbox image replacement纯 CSS 复选框图像替换
【发布时间】：2011-04-15 21:30:00
【问题描述】：

我在表格中有一个复选框列表。（该行中的多个 CB 之一）

 <tr><td><input type="checkbox" class="custom_image" value="1" id="CB1" /><label for='CB1'>&nbsp;</label></td></tr>
 <tr><td><input type="checkbox" class="custom_image" value="2" id="CB2" /><label for='CB2'>&nbsp;</label></td></tr>
 <tr><td><input type="checkbox" class="custom_image" value="3" id="CB3" /><label for='CB3'>&nbsp;</label></td></tr>
 <tr><td><input type="checkbox" class="custom_image" value="4" id="CB4" /><label for='CB4'>&nbsp;</label></td></tr>

我想用一对自定义开/关图像替换复选框图像，我想知道是否有人对如何使用 CSS 做到这一点有更好的了解？

我找到了这个“CSS ninja”教程，但我不得不承认我觉得它有点复杂。 http://www.thecssninja.com/css/custom-inputs-using-css

据我所知，你可以使用伪类

 td:not(#foo) > input[type=checkbox] + label
 {
     background: url('/images/off.png') 0 0px no-repeat;
     height: 16px;
     padding: 0 0 0 0px;
 }

我的期望是，通过添加上面的 CSS，复选框至少会默认以关闭状态显示图像，然后我会添加以下内容以获得开启

 td:not(#foo) > input[type=checkbox]:checked + label {
     background: url('/images/on.png') 0 0px no-repeat;
 }

不幸的是，我似乎在某处遗漏了关键步骤。我尝试使用自定义 CSS3 选择器语法来匹配我当前的设置 - 但一定缺少一些东西（如果重要，图像大小为 16x16）

http://www.w3.org/TR/css3-selectors/#checked

编辑：我在教程中遗漏了一些东西，他将图像更改应用于标签而不是输入本身。我仍然没有得到页面上复选框结果的预期交换图像，但我认为我更接近了。

【问题讨论】：

有一个名为 Uniform 的 jQuery 插件在这方面做得非常好。
遗憾的是我们正在使用原型，我无法改变它（连锁效应会很严重）。我会寻找一个原型插件（花哨的形式）......但我的“个人”目标的一部分是让它使用非 js 方法工作。我知道它可以完成（参见教程）我感觉就像我已经接近了......而且我认为知道如何做到这一点将提高我处理未来类似任务的能力。显然，如果它不可能是方钉圆孔，我会放弃并转向某种 JS 技巧。
等等——“纯 CSS”就像没有图像的 CSS 或没有 Javascript 的 CSS？
哦 - 我的意思是“半纯”我现在肯定在使用图像，但我想可以使用“数据/mime”标签将图像放入 CSS . （我最近看到了一篇关于这个的文章，虽然我现在不知道确切的位置）
等等，“纯 CSS”就像在带有 javascript 和/或额外 dom 节点的 CSS 中一样？

标签： css checkbox css-selectors

【解决方案1】：

你已经很接近了。只需确保隐藏复选框并将其与您通过 input[checkbox] + label 设置样式的标签相关联

完整代码：http://gist.github.com/592332

JSFiddle：http://jsfiddle.net/4huzr/

【讨论】：

这依赖于label 元素，可能会丢失。请参阅下面的答案。
我认为如果您将不透明度设置为 0，您仍然可以实现制表位行为。虽然不是 100%。
无名称和jsfiddle.net/ajshres/4huzr/2486 用于大表时可能会在针对ajax 使用时很方便
@Valipour 异议被拒绝。如果您的复选框没有标签，请在您的复选框上添加标签。这会一举解决您的 UI 和 WAG 问题。

【解决方案2】：

如果您选择 CSS3，似乎没有必要使用 javascript。

通过使用:before 选择器，您可以在两行CSS 中完成此操作。（不涉及脚本）。

这种方法的另一个优点是它不依赖<label> 标签，即使它丢失也能工作。

注意：在不支持 CSS3 的浏览器中，复选框看起来很正常。（向后兼容）。

input[type=checkbox]:before { content:""; display:inline-block; width:12px; height:12px; background:red; }
input[type=checkbox]:checked:before { background:green; }

您可以在此处查看演示：http://jsfiddle.net/hqZt6/1/

还有这个有图片的：

http://jsfiddle.net/hqZt6/6/

【讨论】：

这看起来很有希望，但是，唉，它似乎不适用于 Firefox 14.0.1 Mac
好的，我刚刚发现可以通过将复选框设置为visibility: hidden 并将:before 设置为visibility: visible 来解决此问题。我认为这会破坏向后兼容性。
jsfiddles，他们什么都不做。显示为普通复选框。火狐 27.
与 Windows 相同（抱歉，必须在工作中使用）：适用于 Chrome 35，但不适用于 Firefox 30。
如果有人想知道为什么这在现代浏览器中不起作用：它不起作用，因为不能有 :before 和 :after 伪元素。

【解决方案3】：

谢谢

【讨论】：

【解决方案4】：

使用复选框和 Radios Pure Css 等图像

* {
  font-family: Lato;
  margin: 0;
  padding: 0;
  --transition: 0.15s;
  --border-radius: 0.5rem;
  --background: #ffc107;
  --box-shadow: #ffc107;
}

.cont-bg {
  min-height: 100vh;
  background-image: radial-gradient(
    circle farthest-corner at 7.2% 13.6%,
    rgba(37, 249, 245, 1) 0%,
    rgba(8, 70, 218, 1) 90%
  );
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cont-title {
  color: white;
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.cont-main {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}

.cont-checkbox {
  width: 150px;
  height: 100px;
  border-radius: var(--border-radius);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  background: white;
  transition: transform var(--transition);
}

.cont-checkbox:first-of-type {
  margin-bottom: 0.75rem;
  margin-right: 0.75rem;
}

.cont-checkbox:active {
  transform: scale(0.9);
}

input {
  display: none;
}

input:checked + label {
  opacity: 1;
  box-shadow: 0 0 0 3px var(--background);
}

input:checked + label img {
  -webkit-filter: none; /* Safari 6.0 - 9.0 */
  filter: none;
}

input:checked + label .cover-checkbox {
  opacity: 1;
  transform: scale(1);
}

input:checked + label .cover-checkbox svg {
  stroke-dashoffset: 0;
}

label {
  display: inline-block;
  cursor: pointer;
  border-radius: var(--border-radius);
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
  opacity: 0.6;
}

label img {
  width: 100%;
  height: 70%;
  object-fit: cover;
  clip-path: polygon(0% 0%, 100% 0, 100% 81%, 50% 100%, 0 81%);
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

label .cover-checkbox {
  position: absolute;
  right: 5px;
  top: 3px;
  z-index: 1;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--box-shadow);
  border: 2px solid #fff;
  transition: transform var(--transition),
    opacity calc(var(--transition) * 1.2) linear;
  opacity: 0;
  transform: scale(0);
}

label .cover-checkbox svg {
  width: 13px;
  height: 11px;
  display: inline-block;
  vertical-align: top;
  fill: none;
  margin: 5px 0 0 3px;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16px;
  transition: stroke-dashoffset 0.4s ease var(--transition);
  stroke-dashoffset: 16px;
}

label .info {
  text-align: center;
  margin-top: 0.2rem;
  font-weight: 600;
  font-size: 0.8rem;
}

<div class="cont-bg">
  <div class="cont-title">Checkbox</div>
  <div class="cont-main">
    <div class="cont-checkbox">
      <input type="checkbox" id="myCheckbox-1" />
      <label for="myCheckbox-1">
        <img
          src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2021-mazda-mx-5-miata-mmp-1-1593459650.jpg?crop=0.781xw:0.739xh;0.109xw,0.0968xh&resize=480:*"
        />
        <span class="cover-checkbox">
          <svg viewBox="0 0 12 10">
            <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
          </svg>
        </span>
        <div class="info">Mazda MX-5 Miata</div>
      </label>
    </div>
    <div class="cont-checkbox">
      <input type="checkbox" id="myCheckbox-2" />
      <label for="myCheckbox-2">
        <img
          src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2020-chevrolet-corvette-c8-102-1571146873.jpg?crop=0.548xw:0.411xh;0.255xw,0.321xh&resize=980:*"
        />
        <span class="cover-checkbox">
          <svg viewBox="0 0 12 10">
            <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
          </svg>
        </span>
        <div class="info">Toyota Supra</div>
      </label>
    </div>
  </div>
  <div class="cont-title">Radio</div>
  <div class="cont-main">
    <div class="cont-checkbox">
      <input type="radio" name="myRadio" id="myRadio-1" />
      <label for="myRadio-1">
        <img
          src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2021-mazda-mx-5-miata-mmp-1-1593459650.jpg?crop=0.781xw:0.739xh;0.109xw,0.0968xh&resize=480:*"
        />
        <span class="cover-checkbox">
          <svg viewBox="0 0 12 10">
            <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
          </svg>
        </span>
        <div class="info">Mazda MX-5 Miata</div>
      </label>
    </div>
    <div class="cont-checkbox">
      <input type="radio" name="myRadio" id="myRadio-2" />
      <label for="myRadio-2">
        <img
          src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2020-chevrolet-corvette-c8-102-1571146873.jpg?crop=0.548xw:0.411xh;0.255xw,0.321xh&resize=980:*"
        />
        <span class="cover-checkbox">
          <svg viewBox="0 0 12 10">
            <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
          </svg>
        </span>
        <div class="info">Toyota Supra</div>
      </label>
    </div>
  </div>
</div>

【讨论】：