0

画像を使用せずにチェックボックスのスタイルを設定しようとしています。私はJavaScriptとイベントを使用しているわけではありませんが、それを最後の手段と考えています。はい、多くの人がここでチェックボックスのスタイルについて質問していることは知っていますが、この特定の質問や問題を解決したと思われる回答をした人は見つかりませんでした。

私は見てきました

http://www.inserthtml.com/2012/06/custom-form-radio-checkbox/

これは本当に良いチュートリアルであり、cssだけでカスタムチェックボックスを実行します。ただし、その例では、設計者はトレードオフに直面しています。

このソリューションは基本的にクロムでのみ機能するか、クリック可能な領域に拡張機能として機能するラベルを追加することができなくなります。これは、ブラウザ間の互換性を確保するために、各チェックボックスに空のラベルが付けられ、すべてのスタイルがチェックボックス+ラベルに適用されるためです。その結果、ラベルにテキストを追加すると、チェックボックス内に表示されます。

クロスブラウザ機能と機能ラベルの両方を取得する方法を知っている人はいますか？私が思いつくことができる最善の解決策は、onclick-eventを手動でラベルに追加することです。タッチフレンドリーだと思うので、機能的なラベルを付けるのが本当に好きです。

4

2 に答える 2

1

<label>ページの他の場所の HTML にエクストラを追加するだけです。

例えば：

<input type="checkbox" id="checkbox-2-4" class="regular-checkbox big-checkbox">
<label for="checkbox-2-4"></label>
<label for="checkbox-2-4">Your Label Text Here</label>

その後、どちらかをクリックすると、目的の効果が表示されます。

于 2013-03-01T13:00:38.083 に答える
1

余分なラベルを使用してください!

<label for="checkbox-1-1">Label!</label>
<input type="checkbox" id="checkbox-1-1" class="regular-checkbox" />
<label for="checkbox-1-1"></label>

私のデモではそれらを前に配置しますが、後で (または他の場所に) 配置して、それに応じてスタイルを設定することもできます。あなたが言及した記事の CSS は、チェックボックスの直後にスタイルを設定するラベルのみが非常に具体的であるという点で非常に優れているため、「本物の」ラベルがそのラベルでない限り、問題ありません。

于 2013-03-01T12:57:26.143 に答える