チェックボックスのCSSスタイル

JavaScriptを使用せずにHTMLチェックボックスのスタイルを設定することはできますか？たとえば、このコードはIEでは正常に動作しますが、FirefoxやChromeでは正常に動作しません。 http://jsfiddle.net/5wJxF/ 提案がありますか？チェックボックスのCSSスタイル

出典

2011-06-29 sunjie

ここにコードを貼り付けてください。 –

Operaで動作する – levu

"javascriptを使用しない"についてはわかりません。一般的なアプローチは、javascriptの助けを借りてhtml checkboxをカスタムの "checkbox"に置き換えることです。この方法の例は、さまざまなjQueryプラグインです（例：http://alt-checkbox.starikovs.com – starikovs

YES。はです。

チェックボックス要素のスタイルを直接変更することはできませんが、チェックボックスと組み合わせて<label>要素を使用してスタイルを変更すると、探している効果が得られます。

<input type="checkbox" id="field1" class="mycheckbox" /> 
<label for="field1" class="mycheckbox-label">Label here</label>

そして、あなたのCSSは次のようになります。ここでは

.mycheckbox { 
    display:none; 
} 

.mycheckbox + label { 
    padding:20px; /*or however wide your graphic is*/ 
    background:url(/fancy-unchecked.gif) no-repeat left center; 
} 

.mycheckbox:checked + label { 
    background:url(/fancy-checked.gif) no-repeat left center; 
}

実施例である：http://jsfiddle.net/TVaPX/（Firefoxの5でテスト済み）

このアプローチで問題はそれだけで動作することです現代のブラウザでは古いブラウザは、:checkedまたは+ CSSセレクタをサポートしていない可能性があります。しかし、古いバージョンのIEをサポートしていないのであれば、これはうまくいくでしょう。上記の例はIE8では動作しません（+をサポートしますが、:checkedはサポートしていません）。

あなたがそれに慣れていない場合は、Javascriptソリューションを採用する必要があります。

しかし、これと似たアプローチでも、Javascriptコードを最小限に抑えながら、チェックボックスをオンにしてチェックボックスのクラスを切り替えることができます。上記のコードではなく、:checkedセレクタの代わりに代替クラス名を使用します。それはIE7とIE8で動作します。

希望に役立ちます。

出典

2011-06-29 11:44:56 Spudley

jsFiddleの画像を使用する場合+1）。ただし、ブラウザ間の互換性についての質問には、おそらく答えが必要です"いいえ"。 – Tsar

@Bad：まあ、技術的にはIEで動作します... IE9です。彼は実際にサポートしたいバージョンを指定していませんでした;）もちろん、あなたは当然ですが、IE8は現時点でサポートしなければならない最小の現実的な標準です（おそらく上司がマゾキスであればIE7でもIE6でも可能です）。しかし、私は警告を説明し、古いブラウザーに同じ基本的なアプローチを使用する最小限のJSソリューションを提供するように注意しました。 :) Modernizrなどを使用して、純粋なCSSを使用するかJSソリューションを使用するかを決める前に、互換性をチェックすることができます。もちろん、Modernizr自体はJSソリューションです。 heh。 – Spudley

これはIE7では私にとってはうまくいきませんでした。入力が何かだけであれば動作するようですが、display：none; – stephenway

いいえ、できません。チェックボックスの外観は、OSおよびブラウザ固有です。 JavaScriptベースのソリューションだけが、すべてのブラウザで動作するようにスタイルを設定できます。

this pluginが好きかもしれません。使いやすく、満足のいく結果が得られます。

出典

2011-06-29 11:35:35 mingos

CSS3（ChromeまたはSafariのみ！）でスタイルを設定できますが、それ以外のスタイルはjsです。

ここで40の以上の例があります：FORMS ENHANCEMENTS DEMOS

いくつかのプラグインがあります - ただ純粋ではないCSS3を近代的なブラウザと、何のための標準的なチェックボックス/ドロップダウンのために - 私はjNiceを使用するために使用されます。

よろしく、

ピート

出典

2011-06-29 11:35:50 Iladarsda

チェックボックスのCSSスタイル

答えて

関連する問題