3

I want to create a custom checkbox for the following field:

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

The field is populated from a plugin, so I can't alter that basic markup.

I figured out how to update the look of the checkbox in webkit browsers, but Firefox keeps displaying a checkbox, even when I set -moz-appearance:none;.

How can I update the look of my checkbox in Firefox with CSS, without changing my basic markup?

For reference, here's my current CSS for the checkbox:

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.

Thanks.

4

4 回答 4

3

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

不要在 Web 站点上使用此属性：它不仅是非标准的，而且它的行为会从一个浏览器更改为另一个浏览器。即使是关键字 none在不同浏览器的每个表单元素上的行为也不相同，有些根本不支持。

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

于 2013-10-17T02:30:05.533 回答
1

我想尽一切办法在 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>
于 2014-04-10T09:58:22.033 回答
0

下面是我想出的一个解决方案，它可以嗅出 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>

希望这对某人有帮助！

于 2014-09-04T20:49:00.677 回答
-2

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

于 2013-10-18T03:11:19.747 回答