Question

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

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

基本上我想转换

到

我尝试了不同的方式，如border，outline，box-shadow等，但是在类型复选框的情况下没有用任何方便的css为此或任何其他方式？
请注意，这适用于使用铬引擎的应用，所以我希望这只适用于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>

Answer 2

input[type="checkbox"]{
  height: 140px;
  width: 140px;
 -webkit-appearance: unset !important;
  border: 1px solid red;
}


<input type="checkbox" >

取消设置复选框的外观。但是在检查时你必须做一个解决方法。

在这里工作小提琴https://jsfiddle.net/d2tfo790/

Answer 3

受到Neji解决方案的启发，我制作了一个更简单的自定义复选框版本它不使用图像，因此可以扩展和自定义。用户可以通过$('#id_of_custom_checkbox').val() - ＆gt;获取自定义复选框的值true / false

HTML：

<div>

            <div id='mycheckbox' class='custom-checkbox'>
                <div class='custom-tick'></div>
            </div>

            <span>I agree</span>

        </div>

JS：

$(document).ready(function () {
    $('.custom-checkbox').click(function (e) {
        toggleCustomCheckbox(e.target);
    })
});

function toggleCustomCheckbox(el) {
    var tickEl = $(el).find('.custom-tick').addBack('.custom-tick');
    if (tickEl.css('visibility') === 'hidden') {
        tickEl.css('visibility', 'visible')
        $('.custom-checkbox').val(true)
        alert('you ticked me')
    } else {
        tickEl.css('visibility', 'hidden')
        $('.custom-checkbox').val(false)
        alert('you un-ticked me')
    }

}
function setCustomCheckbox(checkboxid, val) {
    var tickEl = $(checkboxid).find('.custom-tick').addBack('.custom-tick');
    if (val && val === true) {
        tickEl.css('visibility', 'visible')
        $('.custom-checkbox').val(true)
    }
    else {
        tickEl.css('visibility', 'hidden')
        $('.custom-checkbox').val(false)
    }
}

CSS：

.custom-checkbox{
    border: solid 2px orange;
    height: 15px;
    width: 15px;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
  }
.custom-tick{
    border: inherit;
    display: inherit;
    cursor: inherit;
    visibility: hidden;
    height: 8px;
    width: 5px;
    transform: rotate(45deg);
    border-left: 0;
    border-top: 0;
    border-width: 2px;
    margin: 0px 0px 3px 4px;
}

这是工作小提琴：https://jsfiddle.net/JerryGoyal/xr62yara/8/

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

3 个答案: