2

CSSのみを使用してカスタムチェックボックスを作成しようとしていますが、うまくいきませんでした。私は2つの異なるテクニックを試しました：

  1. http://lea.verou.me/2011/05/rule-filtering-based-on-specific-selectors-support/
  2. ラジオ ボタンとしてのカスタム イメージ(derik による提案)

最初のものは最もよく機能し、IE9、FF、および Chrome で正しく表示されます。ただし、クロムの機能は少しずれているようです。Chrome でのテストでは、画像をクリックして「チェック済み」に変更することはできません。代わりに、ラベルのテキストをクリックする必要があります。CSS のみのより良い方法を見つけた人はいますか? Chrome の動作を修正する方法はありますか?

4

3 に答える 3

8

このための優れた解決策は、チェックボックスのスタイルを設定するのではなく、チェックボックスのラベルのスタイルを設定し、チェックボックスボタンを非表示にすることです。

label { display: block; background: green; padding:10px; }
input[type="checkbox"] { display: none; }

<div>
<label for="example">Style me</label><input type="checkbox" id="example" />
</div>

ラベルをクリックすると、チェックボックスがオンになり、これを非表示にして、css/javascriptを使用してラベルでやりたいことを実行します。すべてのブラウザで入力のレンダリングが異なるため、これはチェックボックスのスタイルを設定するよりも簡単です。

于 2012-09-13T20:32:12.200 に答える
0

このバージョンをお勧めします: http://equaltozero.ro/jquery-custom-form-v2-custom-input-type-checkbox-radio-and-custom-select-plugin/ (これは私が作成した小さなプラグインです)

たぶん、これはあなたにとって便利だと思うかもしれません。:-)

「@Lelio Faieta」の提案から、リンクについて詳しく書きます。

このプラグイン (jQuery 小さなプラグイン) を使用すると、アクションを無効にしてカスタム SELECT を使用して、入力タイプ (チェックボックスとラジオ) のデザインを試すことができます。これは、チェックボックスをより適切にプレイできるようにするバージョンです。

于 2013-12-31T20:13:48.707 に答える