none
IE11でのチェックボックスの装飾の仕方について RRS feed

 > 

  • 質問

  • Question
    サインインして投票
    1
    サインインして投票

    いつもお世話になっております。
    チェックボックスの背景色を変える方法が分からないのですが、
    ご存知の方がおられましたら、
    ご教授を頂けますでしょうか。

    【ご質問】
    以下のコードを
    IE10　or　IE11を使用してチェックを入れると
    動作が異なります。

    IE10の場合、
    チェックボックスにチェックを入れると
    チェックボックスの周りが赤くなります。

    IE11の場合、
    チェックボックスにチェックを入ても
    チェックボックスの周りが赤くなりません。

    IE11の場合でも、
    IE10と同じようにチェックボックスの周りを赤く表示したいのですが、
    方法はありますでしょうか？

    【コード】
    <HTML>
    <HEAD>
    <TITLE></TITLE>
    <SCRIPT language=JavaScript>
    <!--
    function changeColor(chkID){
    Myid=document.getElementById(chkID);
    if(Myid.checked == true){
    Myid.style.backgroundColor = '#ff0000';
    }
    else{
    Myid.style.backgroundColor = '#FFFFFF';}
    }
    // -->
    </SCRIPT>
    </HEAD>
    <BODY>
    <FORM>
    <INPUT type="checkbox" id = "c_box1" onclick="changeColor('c_box1')">りんご</div>
    <INPUT type="checkbox" id = "c_box2" onclick="changeColor('c_box2')">ぶどう</div>
    <INPUT type="checkbox" id = "c_box3" onclick="changeColor('c_box3')">なし</div>
    </FORM>
    </BODY>
    </HTML>

    以上です。
    よろしくお願いいたします。

    2014年2月27日 6:12
    |

回答

  • Question
    サインインして投票
    0
    サインインして投票

    IE10まではDOCTYPE宣言が無かったり、完全ではない場合、IE5互換モードでの表示がされていました。IE11では市場での要望を受け明示的に互換表示が指定されていない限り標準モードで表示されるように変更されました。

    なぜこのような話が出てくるかというと、「チェックボックスの周り」はmargin領域であり、標準モードではmargin領域はbackground-colorでは塗られません。つまりそもそもとして

    <input type="checkbox" style="background-color: red;">

    が赤くなりません。

    15年以上前のHTMLを大切に守り続けていきたい気持ちもわからなくもないですが、ぜひ標準モードに移行することをお勧めします。

    2014年2月27日 6:58
    |
  • Question
    サインインして投票
    0
    サインインして投票

    ご連絡ありがとうございます。

    <input type="checkbox" style="background-color: red;">の記述では、
    周りは赤くならない事は分かりました。

    別の方法として、以下のコードを考えたのですが、
    <span>タグを追加する必要があるので
    時間が掛かってしまいます。

    何かタグを追加せずに
    チェックボックスの周りを赤くする方法はありますでしょうか？

    【コード】
    <HTML>
     <HEAD>
     <TITLE></TITLE>
    <style type="text/css">
    <!--
    .checkbox_line {
      border: solid 3px red;
    }
    -->
    </style>

     <SCRIPT language=JavaScript>
     <!--
    function changeColor(chkID){
    Myid=document.getElementById(chkID);
     if(Myid.checked == true){
    Myid.parentNode.className = "checkbox_line";
     }
     else{
    Myid.parentNode.className = "";
     }
    }
     // -->
     </SCRIPT>
     </HEAD>
     <BODY>
     <FORM>
     <span><INPUT type="checkbox" id = "c_box1" onclick="changeColor('c_box1')"></span>りんご
     <span><INPUT type="checkbox" id = "c_box2" onclick="changeColor('c_box2')"></span>ぶどう
     <span><INPUT type="checkbox" id = "c_box3" onclick="changeColor('c_box3')"></span>なし
     </FORM>
     </BODY>
     </HTML>

    以上です。
    よろしくお願いいたします。


    2014年2月27日 8:41
    |

すべての返信

  • Question
    サインインして投票
    0
    サインインして投票

    IE10まではDOCTYPE宣言が無かったり、完全ではない場合、IE5互換モードでの表示がされていました。IE11では市場での要望を受け明示的に互換表示が指定されていない限り標準モードで表示されるように変更されました。

    なぜこのような話が出てくるかというと、「チェックボックスの周り」はmargin領域であり、標準モードではmargin領域はbackground-colorでは塗られません。つまりそもそもとして

    <input type="checkbox" style="background-color: red;">

    が赤くなりません。

    15年以上前のHTMLを大切に守り続けていきたい気持ちもわからなくもないですが、ぜひ標準モードに移行することをお勧めします。

    2014年2月27日 6:58
    |
  • Question
    サインインして投票
    0
    サインインして投票

    ご連絡ありがとうございます。

    <input type="checkbox" style="background-color: red;">の記述では、
    周りは赤くならない事は分かりました。

    別の方法として、以下のコードを考えたのですが、
    <span>タグを追加する必要があるので
    時間が掛かってしまいます。

    何かタグを追加せずに
    チェックボックスの周りを赤くする方法はありますでしょうか？

    【コード】
    <HTML>
     <HEAD>
     <TITLE></TITLE>
    <style type="text/css">
    <!--
    .checkbox_line {
      border: solid 3px red;
    }
    -->
    </style>

     <SCRIPT language=JavaScript>
     <!--
    function changeColor(chkID){
    Myid=document.getElementById(chkID);
     if(Myid.checked == true){
    Myid.parentNode.className = "checkbox_line";
     }
     else{
    Myid.parentNode.className = "";
     }
    }
     // -->
     </SCRIPT>
     </HEAD>
     <BODY>
     <FORM>
     <span><INPUT type="checkbox" id = "c_box1" onclick="changeColor('c_box1')"></span>りんご
     <span><INPUT type="checkbox" id = "c_box2" onclick="changeColor('c_box2')"></span>ぶどう
     <span><INPUT type="checkbox" id = "c_box3" onclick="changeColor('c_box3')"></span>なし
     </FORM>
     </BODY>
     </HTML>

    以上です。
    よろしくお願いいたします。


    2014年2月27日 8:41
    |
  • Question
    サインインして投票
    0
    サインインして投票

    こういう感じでどうでしょうか。
    jQueryとか使えるならもっと楽ですが。

    <html>
    <head>
    <style>
    .checkbox_line {
      border: solid 3px red;
    }
    </style>

    <script>
    function changeColor(c_box) {
      var wrapper;
      var clone = c_box.cloneNode();
      if (c_box.checked) {
        clone.setAttribute('checked', 'checked');
        wrapper = document.createElement('span');
        wrapper.setAttribute('class', 'checkbox_line');
        wrapper.appendChild(clone);
        c_box.parentNode.insertBefore(wrapper, c_box);
        c_box.parentNode.removeChild(c_box);
      }
      else {
        clone.removeAttribute('checked');
        wrapper = c_box.parentNode;
        wrapper.parentNode.insertBefore(clone, wrapper);
        wrapper.parentNode.removeChild(wrapper);
      }
    }
    </script>
    </head>
    <body>
    <INPUT type="checkbox" id="c_box1" onchange="changeColor(this)">りんご
    <INPUT type="checkbox" id="c_box2" onchange="changeColor(this)">ぶどう
    <INPUT type="checkbox" id="c_box3" onchange="changeColor(this)">なし
    </body>
    </html>

    【追記】
    すみません、HTML部分は変えたくないんですよね。
    勝手にonchangeに変えてしまいました。
    私のコードは、onclickだとうまく動かないみたいです。
    クリックは良いのですが、ダブルクリックした時にバグってしまいます。

    • 編集済み femp 2014年2月27日 11:07 追記
    2014年2月27日 10:57
    |
  • Question
    サインインして投票
    0
    サインインして投票

    IE5互換モードを選択されなおかつdocument.getElementById()を使用されるということはWindows ME付属のIE5.5（2000年7月公開）を想定したHTMLでしょうか。骨董的価値が非常に高いと思います。今や当時の文献は非常に少なく下手に手を加えても動作しなくなってしまいますから、このままの方が趣きもあっていいのではないでしょうか。
    # fempさんも「jQueryとか使えるなら」と書かれていますが、IE5.5をサポートしていないはずですし。

    一応、IE9以降で使用可能なbackground-clipというスタイルでbackgroundの塗りつぶされる範囲を制御することもできますが、サンプルからもわかるように、padding / borderまでしか制御できず、marginを塗りつぶす指定はできません。（margin相殺があり、その場合にどちらbackgroundで塗ればいいのか決定できないからだと思います。）

    現代のWebブラウザーで表示することを望まれるのであれば、IE6（2001年8月公開）以降でサポートされる標準モードに移行されることを強くお勧めします。もちろんIE6はWindows MEでの動作もサポートしています。

    2014年2月28日 1:05
    |
  • Question
    サインインして投票
    0
    サインインして投票

    ＞　15年以上前
    この認識は同じですが、
    　
    ＞    Windows ME付属のIE5.5（2000年7月公開）を想定したHTMLでしょうか。
    ＞    IE5.5をサポートしていないはずですし。
    　
    上記認識は異なりました。認識違いなら申し訳ありませんが、掲示板に書く内容としては皮肉がすぎるように感じました。
    単にIE11以前の互換モードを想定しているのだと思います。
    　

    互換モードの場合、今後不要なトラブルを招きがちになるとは思っています。

    2014年2月28日 7:33
    |
  • Question
    サインインして投票
    0
    サインインして投票
    ＞ Windows ME付属のIE5.5（2000年7月公開）を想定したHTMLでしょうか。
    ＞ IE5.5をサポートしていないはずですし。
    　
    上記認識は異なりました。認識違いなら申し訳ありませんが、掲示板に書く内容としては皮肉がすぎるように感じました。
    前者はリンク先（MDN）の記述からです。MSDNでは確認ができませんでした（以前はマウスホバーで対応バージョンを表示してくれましたね）。
    後者の主語はjQueryですが、jQueryはIE5.5をサポートしているのでしょうか？
    2014年2月28日 8:15
    |
  • Question
    サインインして投票
    0
    サインインして投票
    jQueryはIEのQuirksモードをサポートしていないですね。
    私の職場では未だにQuirksモードでしか動かないウェブアプリケーション（IEのみv6以上全て対応）で、jQueryを使っていますが、やはりちらほらと問題は起きます。
    ＃それでも、そういった問題を自力で潰していくコストより、jQueryを使わないことのコストの方が大きいと感じますが。
    2014年3月3日 5:28
    |