4

2 つの異なるページに jQuery ダイアログがあります。何らかの理由で、ラジオ ボタンの外観が異なります (1 つのページは純粋な HTML/Javascript であり、もう 1 つのページは、私が働いている顧客によって作成された内部フレームワークによって作成されます)。

ラジオボタンの表示に違いをもたらすcssで何を探すべきかを理解しようとしています。

2 つのシナリオは次のようになります。

違う：

ここに画像の説明を入力

右：

ここに画像の説明を入力

何を探すべきかについての手がかりを手伝ってくれる人はいますか？

たぶん、両方の写真がIE8のものであることを追加する必要があります。

4

4 に答える 4

9

css では、ラジオ ボタン自体のスタイリング(編集: 境界線、色、背景)はできません。ただし、ここで説明されているように、非表示のラジオボタンとオーバーレイ画像を少しハックできます

基本的に、ラジオ ボタンを非表示にspanし、その場所に右を配置します。クリックするとスタイルが変わります。

html

<label><input type="radio"><span class="overlay"></span> radio button</label>

CSS

input[type=radio] {
  opacity: 0;
  z-index: 9999;
}
/* default radio button style: unchecked */
.overlay {
  display: inline-block;
  position: relative;
  left: -1em; /* or whatever length you need here */
  height: 1em;
  width: 1em;
  background-color: red;
}
/* changed style when checked */
input[type=radio]:checked + .overlay {
  background-color: green;
}

このjsFiddleで試してみてください

于 2013-06-12T07:57:14.750 に答える
1

私は犯人を見つけました：

<meta name="MSThemeCompatible" content="no">

このビットは 1 つのページにあり、他のページにはありません。したがって、1 つのページでそれを削除するか、別のページに追加して同じように見せる必要があります。

于 2013-06-14T11:22:37.823 に答える
1

Web 開発者ツールで両方の要素を検査します。IE8 で F12 を押してから、左上のカーソル アイコンをクリックします (または Ctrl+B を押します)。ラジオボタンをクリックして調べます。

Google Chrome の WDT を使用することをお勧めします。これは、より多くの情報 (関連する CSS ファイルなど) を提供し、より簡単かつ迅速に使用できるためです。ラジオ ボタンを右クリックし、[要素の検査] をクリックして詳細 (DOM、CSS) を表示できます。

于 2013-06-12T07:57:57.523 に答える
0

特に古いブラウザでは、ラジオ ボタンのスタイルは非常に限られています。CSS のみを使用してチェックボックスとラジオをカスタマイズする方法、およびラベルのスタイルを設定してそれと疑似クラスを使用してオン/オフ スイッチを作成する方法についてのチュートリアルを書きまし:beforeた:after。IE8 フォールバックがあります。たぶんこれが役に立ちます :) ここで読んでください: http://blog.felixhagspiel.de/index.php/posts/custom-inputs

于 2015-01-19T11:04:54.330 に答える