javascript - 带有图像而不是标签的 MDL 单选按钮

Question

我必须创建如下所示的 mdl 单选按钮: radio button with image

此组件/div 应在选择/取消选择时更改背景颜色以及图像和文本颜色。我无法做到这一点，我花了很多时间试图弄清楚这一点。

请帮帮我。到目前为止，这是我尝试过的方法，但没有任何效果:

<div class="display-contents-inline margin-bottom">

    <input type="radio" id="android" class="mdl-radio__button margin-right" name="options" checked />
    <span>
      <div class="tab-data data-windows-server  display-contents-inline">
        <div>
          <img src="./components/package-setup/img/windows-server-selected.png">
        </div>
        <div>
          <p>{{i18n.WindowsServer}}</p>
        </div>
      </div>
    </span>
</div>

和

input[type='radio']:checked + .data-windows-server {
  background-color: #01579b;
}

Answer 1

你似乎缺少跨度:输入 [type='radio']:checked + span > .data-windows-server {