2012-05-10 3 views
2

私はCSS3を使ってチェックボックスのスタイルを設定しました。これはチェックボックスを隠してラベルを貼り付けることによって機能しています。今私は自分のチェックボックスに使用したいCSS3のアイコンをいくつか見つけました。チェックボックスはCSS3を使ってスタイル付けされているので、CSS3で作成したアイコンをチェックボックスに使用するのは簡単です。チェックボックスのスタイルをCSS3で設定する

まあ...私はそれが簡単だろうと思ったが、私はそうしていない。

CSS3で作成されたアイコンは、サウンドアイコンです。 1つは「サウンドオン」、もう1つは「サウンドオフ」です。チェックボックスがオンのときは「サウンドオン」アイコンを使用し、オフのときは「サウンドオフ」アイコンを使用します。

私のバイオリンをご覧ください。http://jsfiddle.net/mauricederegt/TRtvx/

これは私が試したものです:基本的に

input:checked + label:before.volume-on:beforeスタイルを持っている必要があります。これはうまくいき、私はボタンのdivで "音の波"を見ました。残念ながら私はもうアイコンの残りの部分(コーン)を見ることができませんでした。

私も可能なものはありますか?そしてこれを達成する方法は?

敬具、

+0

あなたはラジオボタンを使用する必要がありますチェックボックスではありません –

+1

私はあなたが何をしようとしているのか少し混乱しています - 一度に1つのサウンドアイコンを表示しようとしていますか? – antonpug

+0

@antonpugはい、チェックされた=音波で、チェックされていない=ではありません。理論的には、チェックすると音波だけを加えるべきです。 – Maurice

答えて

0

あなたはこれを達成するためのCSSスプライトを使用することができます - 基本的には、2枚の画像として動作する、単一の画像の異なる部分を示すことになります。この偉大なチュートリアルをチェックしてください:http://css-tricks.com/css-sprites/

+0

ラベルに画像を入れても構いませんが、CSS3が不可能な場合は最後の手段です – Maurice

+0

今のところ画像を使用してください、ありがとうございます – Maurice

関連する問題