1

わかりました。HTML が吐き出されているのは、オンラインの調査ツールからのものであるため、影響を与えることはできません。しかし、自分の CSS スタイルシートにリンクして、好きなようにスタイリングに影響を与えることができます。

これが問題です。画像付きの一連のラジオ ボタンがあり、HTML は次のようになります。

<table class="ChoiceStructure">
  <tr>
    <td class="ControlContainer">
      <input choiceid="1" type="radio" name="QID16" id="QID16-1">
    </td>
    <td class="LabelContainer">
      <span class="LabelWrapper">
        <label for="QID16-1">
          <img src="some/image1.jpg" />
        </label>
      </span>
    </td>
    <td class="ControlContainer">
      <input choiceid="1" type="radio" name="QID16" id="QID16-2">
    </td>
    <td class="LabelContainer">
      <span class="LabelWrapper">
        <label for="QID16-2">
          <img src="some/image2.jpg" />
        </label>
      </span>
    </td>
    <td class="ControlContainer">
      <input choiceid="1" type="radio" name="QID16" id="QID16-3">
    </td>
    <td class="LabelContainer">
      <span class="LabelWrapper">
        <label for="QID16-3">
          <img src="some/image3.jpg" />
        </label>
      </span>
    </td>
</table>

これで実際のラジオボタンを隠しています：

.ChoiceStructure tr input[type="radio"]{display: none;}

私がしたいのは、アイテムが選択されている/ラジオボタンがチェックされているときに、画像またはラベルに2pxの灰色の境界線を表示させることです。

私は他の多くのことの中でこれを試しましたが、うまくいかないようです。

.ChoiceStructure tr input[type="radio"]:checked > td:nth-child(2) span label {
   border:2px solid #4d4d4d;
}

機能するソリューションを除いて、すべてのソリューションを試したような気がします。どなたでもご利用いただけます。ありがとうございました。

編集

CSS でやりたいことができず、代わりに Javascript ソリューションを探すように指示されました。JQuery やその他のフレームワークをロードする方法がないため、純粋な JS ソリューションが必要です。私は JS が苦手です。いじることはできますが、自分で書くのはあまり得意ではありません。どんな助けでも大歓迎です。

EDIT 2 JQueryをロードする方法を見つけたので、それが今のオプションです。

4

1 に答える 1