3

次のフィールドのカスタム チェックボックスを作成したい:

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

フィールドはプラグインから入力されるため、その基本的なマークアップを変更することはできません。

Webkit ブラウザーでチェックボックスの外観を更新する方法を見つけましたが、-moz-appearance:none;を設定しても、Firefox はチェックボックスを表示し続けます。.

基本的なマークアップを変更せずに、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;
}

ここに私の問題があります fiddle。

ありがとう。

4

4 に答える 4

3

noneの有効なオプションではないようです-moz-appearance。

このプロパティは Web サイトでは使用しないでください。標準ではないだけでなく、ブラウザによって動作が異なります。キーワードでさえ、 none異なるブラウザー間で各フォーム要素で同じ動作をするわけではなく、まったくサポートしていないものもあります。

実際、Firefox はテキストボックス入力の CSS を尊重しないようです。Chrome ではテキストを表示するが Firefox (v24) では表示しないこの fiddleを参照してください。:before

于 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 に答える