Question

我有一些问题让我的CSS复选框显示在Firefox上。我使用:after:元素设置新复选框的样式，它在webkit浏览器（Chrome和Safari）上运行正常但在Firefox上不可见。我已经知道了，如果风格的复选框不是可见的，那么原生复选框是可见的，所以它并不可怕，但我希望有一致的体验。

当我检查代码时，好像:after元素没有在FF中呈现。

这是我的HTML：

<div class="text-center checkbox">
  <label>
    <input type="checkbox" value="on">
  </label>
</div>

CSS：

.checkbox {
  label {
    position: relative;
    cursor: pointer;
    padding-left: 1em;
  }
  &:hover {
    input[type=checkbox] {
      &:after {
        cursor: pointer;
        border-color: blue;
      }
    }
  }
  input[type=checkbox] {
    position: absolute;
    &:after {
      background: white;
      content: "";
      display: inline-block;
      width: 1.5em;
      height: 1.5em;
      position: relative;
      top: -4px;
      border-radius: 3px;
      border: 2px solid gray;
      transition: border 0.3s ease;
    }
    &:checked {
      &:after {
        background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDkgNDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHBvbHlsaW5lIGlkPSJQYXRoIiBzdHJva2U9IiM0MjkxREIiIHN0cm9rZS13aWR0aD0iMTEiIHBvaW50cz0iMy43NTY1MzE0OCAxOC45ODA0MDUyIDIyLjc1Mzc0MjQgMzMuMDg5OTk4NiA0NC41ODgzMTcxIDMuNDk1NDY5MjIiPjwvcG9seWxpbmU+PC9nPjwvc3ZnPg==);
        background-repeat: no-repeat;
        background-position: center left 2px;
        background-size: 75%;
        border-color: blue;
      }
    }
  }
}

我在Codepen设置了它。在我的CSS文件中，我已经注意到我将代码分叉并修改的位置;鉴于标记我们正在使用我必须对正在设计的元素进行一些调整。灵感代码跨浏览器工作，这让我更加神秘！

Answer 1

尝试以下代码复选框

Sub Data_Filter(ic As Integer, sDate As Date, eDate As Date)

'Needs setup

     ap.CutCopyMode = False

     cr1 = ">=" & sDate
     cr2 = "<=" & eDate

     wsh.Range("$A$2:$AZ$315746").AutoFilter


     wsh.Range("$A$2:$AZ$315746").AutoFilter Field:=1, Criteria1:= _
                    cr1, Operator:=xlAnd, Criteria2:=cr2

     wsh.Range("$A$2:$AZ$315746").AutoFilter Field:=ic, Criteria1:="<>-"


     wsh.Range(wsh.Cells(1, 1), wsh.Cells(1, 2).End(xlDown)).Copy

     wsh1.Activate
     wsh1.Range("A1").PasteSpecial xlPasteAll

     For xx = 0 To 2

        wsh.Activate
        wsh.Range(wsh.Cells(1, ic + xx), wsh.Cells(1, ic + xx).End(xlDown)).Copy



        Select Case wsh.Cells(2, ic + xx).Value  
            Case "Flow (MGD)"
                ix = 1
            Case "Depth (in)"
                ix = 2
            Case "Velocity (fps)"
                ix = 3
        End Select
        wsh1.Activate
        wsh1.Cells(1, 2 + ix).PasteSpecial xlPasteAll
    Next xx

    wsh.ShowAllData
    wsh.Range("$A$2:$AZ$315745").AutoFilter

End Sub

Answer 2

:before和:after仅适用于包含内容的元素。 <input>不能包含内容，因此无法使用。

有关详情：doc

Answer 3

我通常使用label标签作为自定义样式标签。我个人倾向于在输入后贴上我的标签。不包装输入。这样你就可以：

input[type=checkbox] + label {//Basic styles}
input[type=checkbox]:checked + label {//Checked styles}

Answer 4

$('input').click(function(){
    if($(this).prop("checked") == true){
        $(this).closest("label").addClass("checked");
        $(this).closest("label").removeClass("unchecked");
    }
    else if($(this).prop("checked") == false){
        $(this).closest("label").addClass("unchecked");
		$(this).closest("label").removeClass("checked");
    }
});

label input {
    opacity: 0;
    cursor: pointer;
    -ms-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -o-transform: scale(1.5);
}
label.unchecked {
    background: #000;
    cursor:pointer;
}
label.checked {
    background: green;
    cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-center checkbox">
  <label class="unchecked">
    <input type="checkbox" value="on">
  </label>
</div>

跨浏览器CSS复选框问题

4 个答案: