-moz-appearance:none 仍然显示一个复选框答案

【问题标题】：-moz-appearance:none still displays a checkbox-moz-appearance:none 仍然显示一个复选框
【发布时间】：2013-10-25 09:06:40
【问题描述】：

我想为以下字段创建一个自定义复选框：

<label class="cmfchklabel"><input type="checkbox" id="cmf-2" name="cmf[2][value][]" value="true" checked>New Year\'s Eve</label>

该字段是通过插件填充的，因此我无法更改该基本标记。

我想出了如何在 webkit 浏览器中更新复选框的外观，但 Firefox 一直显示一个复选框，即使我设置了 -moz-appearance:none;。

如何在不更改基本标记的情况下使用 CSS 更新 Firefox 中复选框的外观？

作为参考，这是我当前用于复选框的 CSS：

input[type="checkbox"],input[type="checkbox"]:checked {
    -moz-appearance:none;
    -webkit-appearance: none;
    appearance: none;
    border:none;
    outline: none;
}

input[type="checkbox"]:checked:before {
    background:#177dc0;
}

input[type="checkbox"]:before {
    content:'';
    background:#361512;
    display:inline-block;
    height:11px;
    width:11px;
    margin-right:1px;
}

Here's my problem in fiddle.

谢谢。

【问题讨论】：

标签： html css firefox checkbox mozilla

【解决方案1】：

none 似乎不是-moz-appearance 的有效选项。

不要在网站上使用此属性：它不仅不标准，但它的行为会从一种浏览器更改为另一种浏览器。就连关键词 none 在每个表单元素上没有相同的行为不同的浏览器，有些根本不支持。

事实上，Firefox 似乎不会在您的文本框输入中使用任何 CSS。请参阅 this fiddle，它在 Chrome 中显示 :before 文本，但在 Firefox (v24) 中不显示。

【讨论】：

如果没有使用“-moz-appearance”，是否有办法删除 Firefox 中复选框的可见性？
嗯，总是有display:none。然后，您可以在 <label for="myCheckbox" class="checkboxShim"></label> 之类的内容中创建新的复选框 UI。
您也可以查看Mozilla Brick x-toggle。这是相当实验性的，但看起来它会比带前缀的 CSS 选择器更优雅地降级。
谢谢。我不能更改默认标记——或者我会，但只能作为最后的手段。难题是如何使用 CSS 来自定义给定标记中的复选框的样式。再次感谢。

【解决方案2】：

我想尽办法在 FF 中解决这个问题，但 Firefox 只有 1 个解决方案

试试这个

CSS

.test_1 {
    white-space: nowrap;
    width: 100px;
    overflow: hidden;
}
.myCheckbox input {
    display: none;
}

.myCheckbox span {
    width: 20px;
    height: 20px;
    display: block;
    background:#00F;
}

.myCheckbox input:checked + span {
    background:#0F0;
}

HTML

<label for="test">Label for my styled "checkbox"</label>
<label class="myCheckbox">
    <input type="checkbox" name="test"/>
    <span style="border:#666 1px solid;">.</span>
</label>

【讨论】：

【解决方案3】：

下面是我想出的一个解决方案，它可以嗅出 Firefox 并使用一个额外的元素来创造一种错觉。

诀窍是将输入置于额外元素之上，然后将输入的不透明度设为 0。然后您可以根据自己的喜好设置额外元素的样式，并使用相邻的同级选择器来应用“悬停、选中或聚焦”伪类。

HTML：

<div class="container">
    <input type="checkbox" value="yes" name="inputs">
    <i class="for_firefox"></i>
</div>
<div class="container">
    <input type="checkbox" value="no" name="inputs">
    <i class="for_firefox"></i>
</div>

JS：

<script>
    /* Sniff out Firefox */
    if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1){
        jQuery('html').addClass('firefox');
    }
</script>

CSS：

<style>
    /* Default Styling */
    .container{
        position:relative;
        height:30px;
        width:50px;
    }

    input[type="checkbox"]{
        -webkit-appearance:none;
        -moz-appearance:none;
        -ms-appearance:none;
        appearance:none;
        border:1px solid gray;
        background-color:#B7D1E2;
        position:relative;
        height:22px;
        width:22px;
    }

    input[type="checkbox"]:checked,
    input[type="checkbox"]:focus{
        background-color:orange;
    }

    .for_firefox{
        display:none;
    }


    /* Firefox Styling */
    .firefox input[type="checkbox"]{
        /* need to add a little width for a better clickable surface area */
        height:26px;
        width:26px;
        opacity:0;
        z-index:2;
    }

    .firefox .for_firefox{
        position:absolute;
        z-index:1;
    }

    .firefox .answers input[type="checkbox"]:checked + .for_firefox,
    .firefox .answers input[type="checkbox"]:focus + .for_firefox {
        background-color:orange;
    }
</style>

希望这对某人有所帮助！

【讨论】：

【解决方案4】：

我决定只使用“prettyCheckable”jquery 插件。这是更新复选框的一种非常简单的方法。

【讨论】：