javascript - 从 chrome 中的输入类型复选框中删除阴影？

Question

如何从输入类型复选框中删除框阴影。

< input type="checkbox" name="run" value="" style="" >

基本上我要改造

到

我尝试了不同的方法，如边框、轮廓、框阴影等，但在类型复选框的情况下都没有用。
任何方便的 css 用于此或任何其他方式？
请注意，这是针对使用 Chromium 引擎的应用，因此我希望它仅适用于 Google Chrome。

Answer 1

这是我的解决方案，我曾经隐藏实际的复选框，然后用具有所需设计的 div 替换它，还制作了使复选框工作所需的脚本。

$(document).ready(function() {
  $('.control--checkbox').click(function() {

      if ($('#mycheckbox').is(':checked')) {
        $('#mycheckbox').attr('checked', false);
      } else {
        $('#mycheckbox').attr('checked', true);
      }
    }

  );
});

.control input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.control__indicator {
  position: absolute;
  top: 2px;
  left: 0;
  height: 20px;
  width: 20px;
  border: 1px solid black;
}

.control input:disabled~.control__indicator {
  opacity: 0.6;
  pointer-events: none;
}

.control__indicator:after {
  content: '';
  position: absolute;
  display: none;
}

.control input:checked~.control__indicator:after {
  display: block;
}

.control--checkbox .control__indicator:after {
  left: 8px;
  top: 4px;
  width: 3px;
  height: 8px;
  border: solid black;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="container">
  <div class="control-group">

    <label class="control control--checkbox">
      <input type="checkbox" id="mycheckbox" checked="checked"/>
      <div class="control__indicator"></div>
    </label>
  </div>
</div>