跨浏览器 CSS 复选框问题答案

【问题标题】：Cross browser CSS checkbox issue跨浏览器 CSS 复选框问题
【发布时间】：2017-05-03 18:23:12
【问题描述】：

我在让我的 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 文件中，我已经注意到我从哪里分叉和修改了这段代码；鉴于我们使用的标记，我不得不对正在设置样式的元素进行一些调整。灵感代码可以跨浏览器工作，这让我更加困惑！

【问题讨论】：

标签： html css

【解决方案1】：

试试下面的复选框代码

<style type="text/css">
    * {
      box-sizing: border-box;
    }

    body {
      margin: 3em;
      background: #efefef;
    }
    input[type=checkbox] {
        display: block;
        width: 30px;
        height: 30px;
        cursor: pointer;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
        -webkit-appearance: none;
        outline: 0;
        background: white;
        border-radius: 3px;
        border: 2px solid #dedede;
        transition: border 0.3s ease;


    }
    input[type="checkbox"]:hover{ 
            border-radius: 3px;
            border: 2px solid #4291DB;
            transition: border 0.3s ease;

    }
    input[type=checkbox]:checked {
            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-radius: 3px;
            border: 2px solid #4291DB;
            transition: border 0.3s ease;


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

【讨论】：

【解决方案2】：

:before 和 :after 仅适用于有内容的元素。 <input> 不能包含内容，所以它不起作用。

更多信息：doc

【讨论】：

【解决方案3】：

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

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

【讨论】：

感谢@Christien 和 Andrew，这会有所帮助。我认为我坚持使用本机复选框作为后备，因为此时我无法更改标记。
啊，抱歉。我不知道标记无法更改。
好像有点类似这个问题，看看：stackoverflow.com/questions/21220360/…

【解决方案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>

【讨论】：