2011-12-16 8 views
7

ラジオボタンを純粋なCSS(クラスやIDなし)でスタイルする必要があります。単に[type = radio]と入力してください。 未選択と選択のために背景画像を使用したいと思います。 ただし、-vendor-appearance:none;トライデントやGeckoでは動作しません。ちょうどWebkit。 これらのブラウザでは、背景画像をラジオボタンの背景として見ることができますが、画像を表示するのではなくボタンが表示されます。ボタンを削除して背景画像だけを表示するにはどうすればよいですか? http://jsfiddle.net/7kScn/ラジオボタンのスタイル設定

答えて

8

CSS2セレクタートリックを使用してラジオグループに接続し、直後に他のものを表示することができます。

参照:http://jsfiddle.net/7kScn/1/

はそれだけで基本的な例だが、それは、入力フィールドを非表示にして、その直後にラベルのスタイリングを前提に動作し、それをそれはあなたがチェックしている実際のことだ影響を与えます。

+0

CSS3? :(それは電子商取引サイトですが、機能のどれもCSS3だけに基づいている可能性があります)通常は許容範囲を超えるようなチェックボックスを表示するだけではなく、 'display:none;' – henryaaron

+0

[この互換チャート](http://www.quirksmode.org/css/contents.html)によると、この特定のセレクタは現在の状態で正常に動作するはずです。IE6ではサポートされていません(IE7/8のスタティックに関する注意事項は、この使用には影響しません)CSS2(?)のように見えます – animuson

+0

私のサイトはラベルを使用していませんが、+ラベルなしではどのように動作しますか? – henryaaron

1

これは使用ですか? 入力[type = radio]:チェック済み{ 境界線:1ピクセル黒無し; }

0

私はCSSで、チェックボックス、ラジオをカスタマイズするだけでなく、ラベルをスタイリングし、それが:before:after pseudoclassesだ使用を経由してオン/オフスイッチを作成する方法についてのチュートリアルを書きました。おそらくこれは役に立ちます:)ここで読む:http://blog.felixhagspiel.de/index.php/posts/custom-inputs

関連する問題