Question

我遇到了问题：在Internet Explorer中为我的自定义复选框选中了样式。它适用于chrome，friefox和safari。

如何看待IE ..

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

任何人都可以帮忙解决这个问题。

提前致谢。

Answer 1

：after和：之前不打算用于替换元素，例如表单元素（输入）。这就是为什么它不能在IE上工作

通常你使用label元素在输入复选框之前制作如下：

＆＃13;

.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"] +label{
     position: relative;
   }
   
.field input[type="checkbox"]:checked +label:before {
    content: '';
    position: absolute;
    top: 5px;
    height: 14px;
    width: 14px;
    background: #ed8b00;
    left: -20px;
    }

＆＃13;

<div class="field">
  <input type="checkbox" name="test" id="test"  value="ok">
  <label for="test">I'a a label</label>
</div>

＆＃13;

如果你想要自己的风格，你也可以使用之前标签中的复选框图像并完全隐藏输入。

Answer 2

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

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

Demo

选中输入类型复选框：在样式不在Internet Explorer中呈现之前

2 个答案: