如何在 IE 中隐藏输入类型的收音机并收集值？

Question

我有一个“vue”应用程序可以在除 Internet Explorer 之外的所有浏览器中正常运行。我在 IE 中发现的主要错误是，如果我隐藏它并用图像包裹它，它无法识别输入的值。这将是我的 html

      <div class="item-wrapper">
        <form class="item-form" @submit.prevent="onSubmit">
          <div class="cie-item-image" v-on:click="imageSelected = true">
            <div class="cie-item-column">
              <label>
                <input
                  type="radio"
                  name="selectedItem"
                  value="1"
                  v-model="itemFormInfo.selectedItem"
                  @change="onChangeItem($event)"
                />
                <img src="../../assets/1.png" />
              </label>
              <p class="cie-item-subtitle">Pen</p>
            </div>
            <div class="cie-item-column">
              <label>
                <input
                  type="radio"
                  name="selectedItem"
                  value="2"
                  v-model="itemFormInfo.selectedItem"
                  @change="onChangeItem($event)"
                />
                <img src="../../assets/2.png" />
              </label>
              <p class="cie-item-subtitle">Pencil</p>
            </div>
            <div class="cie-item-column">
              <label>
                <input
                  type="radio"
                  name="selectedItem"
                  value="3"
                  v-model="itemFormInfo.selectedItem"
                  @change="onChangeItem($event)"
                />
                <img src="../../assets/3.png" />
              </label>
              <p class="cie-item-subtitle">Rubber</p>
            </div>
          </div>

这里是隐藏的 css


.cie-item-image {
  display: flex;
  justify-content: space-around;
}

.cie-item-column img {
  display: block; /* removes the spacing underneath the image */
  width: 365px; /* sets the width to the parents width */
  height: 244px; /* set the height to the parents height */
  object-fit: cover; /* prevents image from stretching */
  border: 3px solid transparent;
  cursor: pointer;
}

.cie-item-column:hover .cie-item-subtitle:before,
.cie-item-column:focus .cie-item-subtitle:before {
  visibility: visible;
  transform: scaleX(1);
}

.cie-item-column:hover img {
  border: 3px solid $secondaryColor;
  cursor: pointer;
  opacity: 1;
}

/* IMAGE STYLES */
[type="radio"] + img {
  cursor: pointer;
}

/* CHECKED STYLES */
[type="radio"]:checked + img {
  outline: 2px solid $secondaryColor;
  opacity: 1;
}

[type="radio"] + img {
  opacity: 0.4;
}

.sub-title {
  padding: 5px 0px 5px 0px;
  display: flex;
  justify-content: center;
  color: $tertiaryColor;
  font-family: "RalewayRegular";
  font-weight: italic;
  font-size: 20px;
  margin-top: 30px;
  font-weight: bolder;
}

这里我留下了一个link，你可以在其中看到正确的操作，其中如果我select一个图像被select编辑并且方法onchange returns给我正确的数据。

https://codepen.io/CharlieJS/pen/QWNJvXz

正如我之前解释的，在所有浏览器中它都可以正常工作，除了在 IE 中，如果我不显示输入和 select 它直接在 [=32 时它无法识别值=]ing 图像（既没有 returns 值也没有给出 selected 的样式）

为什么我只在 Internet Explorer 中出现此错误？你能做些什么来统一样式标准并在 IE 中应用类似的东西？

问候并感谢大家的时间和帮助

Answer 1

我从@Qtax

找到了解决方案

label{
    display: inline-block;
}
label img{
    pointer-events: none;
}

用这个link

http://jsfiddle.net/VdJ9m/

而且效果很好

如何在 IE 中隐藏输入类型的收音机并收集值？

how to hide a input type radio in IE and collect the value?

html

css

internet-explorer

input

radio-button