6

チェックボックスのイベントをオーバーライドして、mousedown他のチェックボックスをドラッグして選択できるようにしています。これにはevent.preventDefault()、デフォルトのテキスト選択動作を無効にする必要があります。

マウスを離すまで、チェックボックスが「押されている」状態のままになるという厄介な目盛りを除いて、すべてが正常に機能します（それが明確でない場合は、チェックボックスでマウスを押したままにして、私が何を意味するかを確認してください）。

チェックボックスの状態を完全にオフまたは完全にオン (「押されていない」状態) に戻すにはどうすればよいですか?

編集:これは私のコードのjsfiddleです。

4

1 に答える 1

2

できることは、：active疑似クラスを介して「チェックボックスが押されている」状態のCSSをオーバーライドすることです。

​input[type=checkbox]:active {
    outline: none;
    border: none;
    /* etc...*/
}​​​​​​

ただし、このアプローチでは、この状態に対して独自のルールを定義することしかできず、ブラウザにデフォルトのシステムチェックボックスをそのままの状態でレンダリングするように指示することはできません。もちろん、これは防弾ではありませんが、あなたの場合は満足のいくものになるかもしれません。

外観を最大限に制御するには、カスタムチェックボックスコンポーネントを実装するか、そこにある多くのUIウィジェットライブラリ（Dojo、ExtJS、UniformJSなど）の1つを使用する必要があります。これらのカスタムウィジェットは、基本的に実際のウィジェットを非表示にして、<input type="checkbox" />対話するための「偽の」要素を提供します（ただし、ネイティブUIコントロール機能を模倣するのは、完全に機能する場合のみです）。

于 2012-09-04T16:44:55.950 に答える