JavaScriptを使用せずにHTMLチェックボックスのスタイルを設定することはできますか? たとえば、このコードはIEでは正常に動作しますが、FirefoxやChromeでは正常に動作しません。 http://jsfiddle.net/5wJxF/ 提案がありますか?チェックボックスのCSSスタイル
答えて
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で動作します。
希望に役立ちます。
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が好きかもしれません。使いやすく、満足のいく結果が得られます。
CSS3(ChromeまたはSafariのみ!)でスタイルを設定できますが、それ以外のスタイルはjsです。
ここで40の以上の例があります:FORMS ENHANCEMENTS DEMOS
いくつかのプラグインがあります - ただ純粋ではないCSS3を近代的なブラウザと、何のための標準的なチェックボックス/ドロップダウンのために - 私はjNiceを使用するために使用されます。
よろしく、
ピート
- 1. チェックボックスCSSスタイルが無効に見える
- 2. JQueryでホバーのチェックボックスでCSSスタイルを変更するには
- 3. ラベルタグなしのチェックボックスのスタイル
- 4. CSSスタイルのGTK +
- 5. リンクスタイルのCSSスタイル
- 6. JSPのCSSスタイル
- 7. CodeIgniterのCSSスタイル
- 8. チェックボックスの背景色とスタイル
- 9. このCSSアニメーションのチェックボックスをどのようにスタイルするのですか?
- 10. CSSスタイルの競合
- 11. 角2のCSSスタイル
- 12. CSSスタイルの編集
- 13. CSSスタイルの継承
- 14. CSSの競合スタイル
- 15. jQueryタブ&CSSスタイル
- 16. JavaFX ComboBox CSSスタイル
- 17. データテーブルとCSSスタイル
- 18. GoogleNews CSSスタイル
- 19. Dojo FilteringSelect CSSスタイル
- 20. CSSスタイルとXSLT?
- 21. CSS無効スタイル
- 22. オーバーライドブートストラップ3 CSSスタイル
- 23. CSSのチェックボックス条件
- 24. ブートストラップglyphiconチェックボックスのCSS
- 25. 番号付きスタイルの動的CSSスタイル
- 26. CSSスタイルのフォントスタイルとテキスト装飾スタイル
- 27. jQuery MobileチェックボックスCSS
- 28. チェックボックスCSSグローカラー
- 29. less.js 1.2.1他のCSSスタイルでは、CSSスタイルが機能しない
- 30. Firefoxのチェックボックスのスタイルの問題
ここにコードを貼り付けてください。 –
Operaで動作する – levu
"javascriptを使用しない"についてはわかりません。一般的なアプローチは、javascriptの助けを借りてhtml checkboxをカスタムの "checkbox"に置き換えることです。この方法の例は、さまざまなjQueryプラグインです(例:http://alt-checkbox.starikovs.com – starikovs