Html 选中“输入类型”复选框：在internet explorer中不呈现样式之前

我对Internet explorer中自定义复选框的样式设置有问题。在chrome、friefox和safari中效果良好

你看起来怎么样

接受条款和条件。
.字段输入[type=“checkbox”]{
宽度：20px；
高度：20px；
边框：实心1pxRGBA（97,80,77,0.5）；
浮动：左；
大纲：0；
左侧填充：0px！重要；
位置：相对位置；
填充：4px；
光标：指针；
}
.field输入[type=“checkbox”]：选中：之前{
内容：''；
位置：绝对位置；
顶部：3px；
高度：12px；
宽度：12px；
背景：#ed8b00；
左：3px；
}

有人能帮忙吗

---

提前感谢。

：after和：before不用于替换的元素，例如表单元素（输入）。这就是为什么它在IE上不起作用

通常，您可以使用label元素在输入时生成before元素复选框，如下所示：

.field输入[type=“checkbox”]{
宽度：20px；
高度：20px；
边框：实心1pxRGBA（97,80,77,0.5）；
浮动：左；
大纲：0；
左侧填充：0px！重要；
位置：相对位置；
填充：4px；
光标：指针；
}
.字段输入[type=“checkbox”]+标签{
位置：相对位置；
}
.字段输入[type=“checkbox”]：选中+标签：之前{
内容：''；
位置：绝对位置；
顶部：5px；
高度：14px；
宽度：14px；
背景：#ed8b00；
左：-20px；
}

我是一个标签

使用此代码，它可以在所有浏览器（IE 10+、Chrome、Mozilla和Safari）上正常工作

.复选框{
位置：相对位置；
}
输入[type=“checkbox”]{
不透明度：0；
位置：绝对位置；
z指数：1；
宽度：20px；
高度：20px；
左：0；
排名：0；
保证金：0；
}
.复选框标签：在{
内容：“；
宽度：20px；
高度：20px；
边框：1px实心#000；
显示：块；
位置：绝对位置；
左：0；
排名：0；
}
.checkbox输入[type=“checkbox”]：选中+标签：之前{
背景：#000000；
}

---

什么版本的IE？IE 11版..你应该将实际输入的代码发布到你是否确定chrome、safari和firefox中没有任何问题？因为：输入上的：before和：after元素不应该工作……为什么要重新发布已关闭的相同问题？只需检查副本，您就会得到答案

<div class="field">
<input autocomplete="off" id="check" type="checkbox" name="checkbox"/>
<label class="title-checkbox">Accept terms & conditions.</label>
</div>

    .field input[type="checkbox"] {
        width: 20px;
        height: 20px;
        border: solid 1px rgba(97, 80, 77, 0.5);
        float: left;
        outline: 0;
        padding-left: 0px !important;
        position: relative;
        padding: 4px;
        cursor: pointer;
       }
    .field input[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        top: 3px;
        height: 12px;
        width: 12px;
        background: #ed8b00;
        left: 3px;
        }

<div class="checkbox">
  <input type="checkbox" />
  <label></label>
</div>

.checkbox{
  position:relative;
}
input[type="checkbox"]{
  opacity:0;
  position:absolute;
  z-index:1;
  width:20px;
  height:20px;
  left:0;
  top:0;
  margin:0;
}
.checkbox label:before{
  content:"";
  width:20px;
  height:20px;
  border:1px solid #000;
  display:block;
  position:absolute;
  left:0;
  top:0;
}
.checkbox input[type="checkbox"]:checked + label:before{
  background:#000000;
}