html - IE 11 和 mozilla 复选框不起作用

Question

<input class="regular-checkbox ucheckbox" type="checkbox">

this is a example for working box

<input name="atnc" class="regular-checkbox" id="addtnchchk" type="checkbox">

this is a example for not working box

    .regular-checkbox{
  -webkit-appearance: none;
  background-color: white;
  border:1px solid #cbd6e2;
  padding: 10px;
  border-radius: 3px;
  width: 20px;
  height: 20px;
  position: relative;
}

.regular-checkbox:active, .regular-checkbox:focus{
    box-shadow: 0px 0px 7px #00b0f0;
    border:1px solid #00b0f0;
}

.regular-checkbox:checked {
  background-color: #00b0f0;
  border:1px solid #00b0f0;
  color: white;
}
.regular-checkbox:focus{
  outline:0 !important;
  outline-offset: 0 !important;
}
.regular-checkbox:checked:after {
  font:normal normal normal 14px/1 FontAwesome;
  content: '\f00c';
  font-size: 15px;
  position: absolute;
  top: 3px;
  left: 2px;
  color: white;
}

为什么网站上的所有复选框都有效，但这个在 mozila 上也没有同样的问题？？ chrome 一切正常!

Answer 1

抱歉各位，我刚刚发现错误!!!我所有的工作复选框都在 <span></span> 中和其他不起作用的在 <button></button> 中.

IE 和 FF 浏览器将其视为单击按钮而不是复选框。但在 Chrome 上运行良好..!!!感谢您的时间和关注!