2

ラジオボタンがほとんどありません。ラジオボタンのスタイルを画像で変更するには、次の css を使用します。Firefox、Chrome、さらには Internet Explorer 9 でも完全に動作しますが、Internet Explorer 8 では動作しません。

input[type='radio'] + label {
margin: 0;
clear: none;
padding: 5px 0 4px 24px;
/* Make look clickable because they are */
cursor: pointer;
background: url(icons.png) left center no-repeat;
background-position:0px -7055px; width:45px; height:20px; border:0px; cursor:pointer
}

input[type='radio']:checked + label {
background-image: url(icons.png);
background-position:-54px -7055px; width:45px; height:20px; border:0px; cursor:pointer
}
4

3 に答える 3

5

the :checked pseudo class is not available in IE8

http://www.quirksmode.org/css/contents.html

http://www.quirksmode.org/css/enabled.html

I just show normal radio buttons in IE8 and lower. This gives people with old technology the same experience and doesn't burden you with hours/days of work just to have everything look the same across browsers.

于 2012-12-25T03:24:34.553 に答える
1

IE 8 以降のみ。あなたが使用することができます

input[type='radio'][checked] + label {
background-image: url(icons.png);
background-position:-54px -7055px; width:45px; height:20px; border:0px; cursor:pointer
}

これは IE8 以降では機能しますが、IE7 以下では機能しません。

于 2013-07-04T05:22:43.230 に答える
0

そこにあるすべてのポリフィルを試しました。ie9.js を除いて、どれも機能しませんでした。残念ながら、 ie9.jsによってページの読み込みがピーナッツ バターの中を移動するカタツムリの群れのように遅くなりました。ほぼ 2 日間 (!) のろいをした後、ようやく IE8 のラジオ ボタンの一部を jQuery と CSS で少し操作できるようになりました。

最初の問題は、un-/checked 入力にクラスを追加および削除することでした。2 つ目は、代わりに別のラジオ ボタンがチェックされると、チェックされていない入力を IE8 に強制的に再レン​​ダリングさせることでした。このアプローチは、チェックボックスでも機能すると思います。

jQuery:

// maybe you need this next small line, I didn't
// $('input:checked').addClass("selected");
$('input').change(function () {  // click() worked too but change is safer
  $(this).addClass("selected");
  $('input:not(:checked)').removeClass("selected");
  // adding a class to a wrapping element
  // and then remove it to force IE8 to rerender
  var testClass = "testClass";       
  $(this).parent().parent().addClass(testClass).removeClass(testClass);
});

そしてCSS：

input[type="radio"] {
  // display: none; won't work
  // so replace the actual button offscreen
  // or cover it with following label
}
input[type="radio"] + label {
  background-color: red;  // or background-image
}
input[type="radio"].selected + label {
  background-color: green;  // or background-image
}
input[type="radio"] + label,
input[type="radio"].selected + label {
  position: relative;
  top: 150px;
  left: 300px;
  height: 48px;
  width: 48px;
  display:inline-block;
  padding: 0;
  text-indent: -9999px;
  cursor: pointer;
}
于 2014-04-25T11:36:33.690 に答える