Question

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

原帖：

在我使用CSS修改其外观后，复选框不会显示为已选中。复选框会进行检查，因为值会在表单摘要中收集。所以我认为这只是CSS的问题。此外，未经检查和悬停状态工作（！），这使我更加怪异。

这是HTML代码的片段，我试图尽可能地删除它。我不是编码器，因此我使用Wordpress的第三方插件生成大量代码。如果有必要的东西丢失，请告诉我。

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

可能与：已检查有关。我知道只有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);
}

复选框不显示为已选中

1 个答案: