带有图像而不是标签的 MDL 单选按钮答案

【问题标题】：MDL radio button with images and not labels带有图像而不是标签的 MDL 单选按钮
【发布时间】：2019-11-17 11:13:20
【问题描述】：

我必须创建如下所示的 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;
}

【问题讨论】：

你会设置小提琴还是codepen？我怀疑那是一张图片，它是一个带有自定义 windows/linux 图标的 html 按钮。

标签： javascript html css radio-button material-design

【解决方案1】：

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

【讨论】：