無効なチェックボックスにCSSを設定する方法は？

StackOverflow https://stackoverflow.com/questions/1206960

  •  05-07-2019
  •  | 
  •  

質問

グリッド内の無効なチェックボックスのCSSを変更したい（それらはユーザーにとって見づらい）。これを行う簡単な方法は何ですか？

使用するテクノロジーの好み（降順）：
CSS
JavaScript
jQuery
その他

役に立ちましたか？

解決

背景の色（フォーム/フィールドセットの background-color ）を変更することをお勧めします。より良いコントラストが得られるかどうかを確認します。無効（選択不可？）のチェックボックスの色を変更したい場合は、次を試してください：

input[disabled] {
...
/* CSS here */
...
}

しかし、何らかの理由で無効にされている場合、目立つようにする必要はありませんか？グレー表示されるのは、アクティブ/有効なフォーム要素と非アクティブ/無効なフォーム要素の混乱を避けるためです。

他のヒント

チェックボックスを有効のままにしますが、クリックできないように onfocus = this.blur（）をチェックボックスに追加します。

または（コメントで言うように）ASP.netを使用している場合は、チェックボックスを有効に設定したままにして、次をPage.Loadイベントに追加します。

CheckBox1.Attributes.Add("onclick", "return false;");

私は、いくつかのJSライブラリを使って仕事をすることができました。私の要件は、ボックスを標準のチェックボックスとは大きく異なるようにすることでした。次のライブラリは508にも準拠しています。

スタイル付きフォームコントロール

input：disabled {} は、＆＃8212;推測したとおりのIEを除くすべてのブラウザーで機能します。 IEの場合、JSライブラリを使用する必要があると思います。

基本的に、div、p、またはグリッドに使用される他の要素にonclickイベントをアタッチし、チェックされた値をグリッドのそのフィールドに関連付けられた非表示要素に転送する必要があります。 javascriptが使用されている場合、これは非常に簡単です-jqueryをチェックして、任意の要素にonclickイベントを追加します。クリックした場合、非表示要素にvalue = 1を設定します。

実際には、CSS3を少し使用すると、非常に単純なソリューションをモックアップできます。 どのようなサポートを提供したいかを常に考慮する必要があります。 ただし、最新のブラウザで動作することに問題がない場合は、試してみてください。

これがHTMLです

<label>
    <input type="checkbox" name="test" />
    <span>I accept terms and cons</span><br><br>
    <button>Great!</button>
</label>

これがCSSです

button { display: none}
:checked ~ button {
    font-style: italic;
    color: green;  
    display: inherit;
}

そして、デモ http://jsfiddle.net/DyjmM/

有効なチェックボックスと無効なチェックボックスが混在するフォームがある場合、無効なチェックボックスをフェードアウトすることで、ユーザーの混乱を防ぎます。チェックボックス付きの表示専用ページを表示すること（購入領収書で選択された製品オプションを表示するなど）が目的の場合、チェックボックスの入力要素を画像に置き換えると、より良い結果が得られる可能性があります。

交換

<input type="checkbox" disabled>
<input type="checkbox" disabled checked>

with 

<img src="unchecked.gif">
<img src="checked.gif">
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top