wordpress - 复选框不显示为已选中

Question

编辑 2016-11-02:根据开发者的说法，无法通过此插件修改 :checked 状态。但是我购买了一些自定义编码，并且将实现上传未选中/悬停/选中图像的功能。 :) 插件是 Zigaform，如果将来有人会寻找类似的解决方案。

---

原帖:

在我用 CSS 修改了它们的外观后，复选框没有显示为已选中。不过，复选框确实会选中，因为值会收集在表单的摘要中。所以我相信这只是 CSS 的问题。此外，未选中和悬停状态有效(!)，这让我觉得很奇怪。

这是 HTML 代码的一个片段，我尽可能地精简了它。我不是编码员，所以我在 Wordpress 中使用第 3 方插件，它会生成大量代码。让我知道是否缺少重要的东西。

<div id="rockfm_ui3brbw6kci" data-idfield="ui3brbw6kci" data-typefield="41" class="rockfm-dyncheckbox rockfm-field rockfm-costest-field ">
  <div class="rockfm-input-container">
    <div data-gal-id="blueimp-gallery5" data-opt-label="Option 1" title="Option 1" class="uifm-dcheckbox-item">
      <div class="uifm-dcheckbox-item-wrap">
        <div class="uifm-dcheckbox-item-chkst btn-default"> </div>
        <div style="display:none" class="uifm-dcheckbox-item-qty-wrap">
          <div class="input-group"> <span class="input-group-btn"> <button type="button" class="btn btn-default" > </button>
            </span>
            <span class="input-group-btn"> </span> <span class="input-group-btn">
            <button type="button" class="btn btn-default"> </button>
          </span>
          </div>
        </div>
        <input class="uifm-dcheckbox-item-chkval" name="uiform_fields[ui3brbw6kci][0]" type="checkbox" value="" checked="checked"> </div>
      <div class="uifm-dcheckbox-item-gal-imgs">
      </div>
    </div>
    <canvas class="uifm-dcheckbox-item-viewport"></canvas>
  </div>
</div>

这是我的 CSS 修改:

.uifm-dcheckbox-item-viewport {
  margin: -10px;
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  width: 100px;
  height: 70px;
  -webkit-transition: all 100ms ease-in;
  -moz-transition: all 100ms ease-in;
  transition: all 100ms ease-in;
  -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
  -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
  filter: brightness(1.8) grayscale(1) opacity(.7);
  -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.uifm-dcheckbox-item-viewport:hover {
  -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
  -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
  filter: brightness(1.2) grayscale(.5) opacity(.9);
}

.uifm-dcheckbox-item-viewport input:checked {
  -webkit-filter: none;
  -moz-filter: none;
  filter: none;
}

可能与:checked有关。我知道这仅适用于 CSS3，因为代码可以自行运行。可能我只是错过了一些明显的东西。

问候，

Answer 1

将此添加到您的 CSS 中。现在它应该工作了。您可以根据需要自定义过滤器。

.uifm-dcheckbox-item-chkst.btn-default.uifm-dcheckbox-checked ~ canvas {
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
    -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
    filter: brightness(1.2) grayscale(.5) opacity(.9);
}