8

<p>最近、HTMLチェックボックスとラジオボタンのスタイルを設定する方法を作成しましたが、aや。などの要素を追加する必要があります<span>。これはひどく不便ではありませんが、完全なWebソフトウェアをスタイリング（CSS）する場合、すべてのチェックボックスに戻って書き直す必要があるのは面倒です。

最近、追加の要素を使用せずにスタイルを設定する方法について「啓示」がありました。これはChromeで驚くほど機能しますが、Firefoxでは機能しないと言えます。

私のHTML：

<input type="checkbox" />

私のCSS：

input[type="checkbox"]
{
    visibility:hidden;
}

input[type="checkbox"]:after
{
    visibility:visible;
    content:"W";
    display:block;
    background:#0ab9bf;
    width:20px;
    line-height:20px;
    text-align:center;
    height:20px;
    overflow:hidden;
    text-indent:-100px;
}

input[type="checkbox"]:checked:after
{
    text-indent:0;
}

ここの誰かが助けてくれることを望んでいましたか？私はこれに対する厳密なCSSソリューションを探していることを覚えておいてください。私は最後の手段としてのみjavascriptソリューションを探します。それまでは、私の期待は大きいです。

私の質問は、Firefoxが「チェックボックス」を表示するのを妨げているのは何ですか？そして、どうすればこれを修正できますか。これを行うための別の方法はありますか？

4

1 に答える 1

3

デビッド・トーマスが「親」要素のために疑似要素が表示されないことを示唆しているように、私は推測しています。他のブラウザで機能する理由は、疑似要素が要素の子と見なされない別の実装によって説明できますか？

別の方法

とにかく、私はこのようなチェックボックスとラジオボタンのスタイリングを少し経験しました。私が学んだかなりクールなトリックは、画面外を非表示にして、いくつかの派手なセレクタートリック<input>に関連するスタイルを設定することです。この方法は、をクリックすると関連するもクリック<label>されるという事実を利用しています。<label><input>

jsFiddle

HTML

<input type="checkbox" id="check" />
<label for="check"></label>

CSS

input[type="checkbox"] {
    position:absolute;
    left:-9999px;
    top:-9999px;
}

input[type="checkbox"] + label {
    visibility:visible;
    content:"W";
    display:block;
    background:#0ab9bf;
    width:20px;
    line-height:20px;
    text-align:center;
    height:20px;
    overflow:hidden;
}

input[type="checkbox"]:checked + label {
    background:#F00;
}

方法の改善

このメソッドはa + bセレクターを使用します。これは、b直後に続くselectを意味しますa。したがって、の<label>後に来る必要があります<input>。これを行うための「より安全な」方法は、一般的な兄弟セレクターを使用して、コンテナーとスタイルでそれらをラップすることa ~ bです。<label>その場合、スタイルは、兄弟である限り、別の位置で許容されます。

<div>
    <input type="checkbox" id="check" />
    <div>It will still work!</div>
    <label for="check"></label>
</div>

互換性

スタンドアロンのこのメソッドは、をサポートしていないため、IE8以下とは互換性がありません:checked。これを回避する通常の方法はクラスを追加することです.checkedが、残念ながらIE8にはクラスを変更するときにレンダリングのバグがあり、もう少しハッキーなJavaScriptが必要です。

var labels = document.querySelectorAll('label');
for (var i = 0; i < labels.length; i++) {
    labels[i].onclick = handleClick;
}

function handleClick () {
    var checkbox = document.getElementById(this.getAttribute('for'));
    // do something with checkbox.checked
    alert(checkbox.checked);
}

幸いなことに、現在は市場シェアが小さい（<0.77％）ため、8未満のものをサポートする必要はありません。

于 2013-03-18T13:10:20.387 に答える