0

私はこの問題の解決策を数時間探していましたが、運がありませんでした。誰もが問題を解決するために背景画像を使用しているようです。私は色だけを使用したいので、モバイルデバイスに追加のCSSを必要とせずにソリューションのスケーリングが向上します。

私はほとんど実用的な解決策を持っていますが、1）「チェックボックス」はラベルの他の部分のようにクリックできません。2）HTMLを変更せずにラベルと「チェックボックス」の間にスペースを追加する方法が見つからないようです（私はしたくないことですが、実行可能なCSSのみまたはJQueryソリューションがない場合は試します） 。

HTMLは次のとおりです。

<div id="edit-field-school-education-und" class="form-checkboxes">
    <div class="form-item form-type-checkbox form-item-field-school-education-und-28">
        <input type="checkbox" id="edit-field-school-education-und-28" name="field_school_education[und][28]" value="28" checked="checked" class="form-checkbox">  
        <label class="option" for="edit-field-school-education-und-28">Evening Classes &amp; Distance Learning </label>
    </div>
     ......  Repeated for several checkboxes   .......
</div>

これまでの私のCSSは次のとおりです。

.form-checkbox {display:none}
.form-checkbox + label:before {content: "\00a0\00a0\00a0\00a0"; height: 19px; width: 19px; border: 1px  solid black; cursor:pointer; }
input[type="checkbox"]:checked + label:before {background-color: #34c1ce;}

私はCSS3ソリューションを好みますが、一般的なHTMLまたはJSソリューションで問題ありません。チェックボックスリストはいつでも大きくなる可能性があるため、IDなどに基づく解決策はありません。ただし、同じラベルテキストでdivを出力する方法をおそらく理解できたでしょう。

4

2 に答える 2

2

cssではなくブラウザに応じてレンダリングされるチェックボックスに背景色を設定することはできませんが、背景画像を設定することはできます here は便利なチュートリアルです

http://www.whatstyle.net/articles/18/pretty_form_controls_with_css

于 2013-01-31T01:49:15.230 に答える
1

最適なオプションは、ボタンと JavaScript を使用して独自のチェックボックスを作成するか、JavaScript UI を使用することです。ただし、これは JavaScript が有効になっていない場合は機能しないことを意味するため、フォールバックを作成することをお勧めします (デフォルトでチェックボックスを表示し、JS を使用してカスタムのものに切り替えます)。

于 2013-01-31T01:53:11.730 に答える