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

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

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

基本上我想改变

到

我尝试了不同的方法，如边框、轮廓、框阴影等，但在输入checkbox时都不起作用。
有没有这种或其他方式的方便css？
请注意，这是针对使用Chrome引擎的应用程序的，因此，我希望这只适用于Google Chrome。

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


<input type="checkbox" >

高度：140像素；
宽度：140px；
-webkit外观：未设置！重要；
边框：1px纯红；
}

只需取消设置复选框的外观。但在检查之后，你必须做一个变通办法

---

在这里工作Fiddle

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

$（文档）.ready（函数（）{
$（'.control--checkbox'）。单击（函数（）{
if（$（'#mycheckbox'）。是（':checked'））{
$（'#mycheckbox'）.attr（'checked'，false）；
}否则{
$（'#mycheckbox'）.attr（'checked'，true）；
}
}
);
});
。控制输入{
位置：绝对位置；
z指数：-1；
不透明度：0；
}
.控制指示器{
位置：绝对位置；
顶部：2个；
左：0；
高度：20px；
宽度：20px；
边框：1px纯黑；
}
.控制输入：禁用~.控制指示灯{
不透明度：0.6；
指针事件：无；
}
.控制指示器：之后{
内容：''；
位置：绝对位置；
显示：无；
}
.控制输入：选中~.控制指示灯：后{
显示：块；
}
.control--复选框.control\u指示器：之后{
左：8px；
顶部：4px；
宽度：3倍；
高度：8px；
边框：纯黑；
边框宽度：0 2px 2px 0；
变换：旋转（45度）；
}
受Neji解决方案的启发，我制作了一个更简单的自定义复选框版本。

它不使用图像，因此具有可伸缩性和可定制性。用户可以通过
$（“#id_of_custom_checkbox”）.val（）获取自定义复选框的值
->
true
/
false

HTML:

CSS:

这里是工作的提琴：
@downvoter介意告诉理由b4 downvoting吗？有些人只是喜欢向下投票给任何人，我希望Stackoverflow社区能够解决这个问题（voteup）我不能“勾选”你的复选框，你将不能这样做，这就是我告诉你的。您将无法修改复选框的默认外观。或者你必须在它上面创建一个面具，让它看起来像一个复选框。这正是我所想的。很好的控制__indicator@JerryGoyal很高兴帮助你Sir@JerryGoyal你能接受这个解决方案吗
<div>

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

            <span>I agree</span>

        </div>

$(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)
    }
}

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