Question

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

<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

感谢。

Answer 1

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

不要在网站上使用此属性：不仅是非标准的，但它的行为从一个浏览器变为另一个浏览器。甚至是关键字 none在每个表单元素上没有相同的行为不同的浏览器，有些根本不支持。

事实上，Firefox似乎不会尊重文本框输入中的任何CSS。请参阅this fiddle，其中显示Chrome中的:before文字，但不显示Firefox（v24）。

Answer 2

我尝试了所有解决FF问题的方法，但Firefox只有一个解决方案

试试这个

<强> 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>

Answer 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>

希望这有助于某人！

Answer 4

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

-moz-appearance：none仍然显示一个复选框

4 个答案: