Question

我有一张表格，其中我有复选框样式图片。所有这些都适用于Chrome，FF，Edge ......但不是IE。

基本上，当样式中的复选框不在表单中时，CSS样式的工作方式与我想要的一样，但只要表单标签绕过它们，它们就会停止正常工作。而不是单击图像以获得检查效果，我必须单击图像旁边。

任何人帮我解决了我必须做的事情才能让它在IE中正常运行？我已经在IE 11中尝试过了。为什么要在一个表单中进行它会导致它改变行为？

我不是一个自然编码器，下面的大多数CSS都是根据我在这里发现的另一个问题改编的。

Jsfiddle - https://jsfiddle.net/vpLf8vpw/5/

HTML

<form> 
   <input id="cb1" name="product1[]" type="checkbox" value=" Classic switch" />
   <label for="cb1">
       <img src="http://www.4jewelersonly.com/wp-content/uploads/sites/16/2015/03/127880648-670x670.jpg" alt="" />
   </label>

   <input id="cb2" name="product2[]" type="checkbox" value=" Right angle switch" />
    <label for="cb2">
        <img src="http://www.4jewelersonly.com/wp-content/uploads/sites/16/2015/03/127880648-670x670.jpg" alt="" />
    </label>

    <input id="cb3" name="product3[]" type="checkbox" value=" Adaptor" />
    <label for="cb3">
        <img src="http://www.4jewelersonly.com/wp-content/uploads/sites/16/2015/03/127880648-670x670.jpg" alt="" />
    </label>

    <input id="cb4" name="product4[]" type="checkbox" value=" Blow switch" />
    <label for="cb4">
        <img src="http://www.4jewelersonly.com/wp-content/uploads/sites/16/2015/03/127880648-670x670.jpg" alt="" />
    </label>

    <input id="cb5" name="product5[]" type="checkbox" value=" Cable" />
    <label for="cb5">
        <img src="http://www.4jewelersonly.com/wp-content/uploads/sites/16/2015/03/127880648-670x670.jpg" alt="" />
    </label>

CSS

input[type="checkbox"][id^="cb"] {
    display: none;
}

label {


border: none;
  padding: none;
  display: block;
  position: relative;
  margin: none;
  cursor: pointer;
}

label img {
  height: 125px;
  width: 125px;
  transition-duration: 0.2s;
  transform-origin: 50% 50%;
}


:checked + label img {
  transform: scale(1);
  box-shadow: 0 0 20px #ff0;
  z-index: -1;
}

Answer 1

这看起来像是另一个问题的重复：Image label for input in a form not clickable in IE

更新小提琴：https://jsfiddle.net/dnptmydo/

＆＃13;

input[type="checkbox"][id^="cb"] {
  display: none;
}

label {
  border: none;
  padding: none;
  display: inline-block;
  position: relative;
  margin: none;
  /* cursor: pointer; */
}

label img {
  height: 125px;
  width: 125px;
  transition-duration: 0.2s;
  transform-origin: 50% 50%;
  pointer-events: none;
}


:checked + label img {
  transform: scale(1);
  box-shadow: 0 0 20px #ff0;
  z-index: -1;
}

＆＃13;

<form>
	

    
	
					<input id="cb1" name="product1[]" type="checkbox" value=" Classic switch" />
					<label for="cb1">
						<img src="http://www.4jewelersonly.com/wp-content/uploads/sites/16/2015/03/127880648-670x670.jpg" alt="" />
					</label>
			
					<input id="cb2" name="product2[]" type="checkbox" value=" Right angle switch" />
					<label for="cb2">
						<img src="http://www.4jewelersonly.com/wp-content/uploads/sites/16/2015/03/127880648-670x670.jpg" alt="" />
					</label>
			
					<input id="cb3" name="product3[]" type="checkbox" value=" Adaptor" />
					<label for="cb3">
						<img src="http://www.4jewelersonly.com/wp-content/uploads/sites/16/2015/03/127880648-670x670.jpg" alt="" />
					</label>
			
					<input id="cb4" name="product4[]" type="checkbox" value=" Blow switch" />
					<label for="cb4">
						<img src="http://www.4jewelersonly.com/wp-content/uploads/sites/16/2015/03/127880648-670x670.jpg" alt="" />
					</label>
				
					<input id="cb5" name="product5[]" type="checkbox" value=" Cable" />
					<label for="cb5">
						<img src="http://www.4jewelersonly.com/wp-content/uploads/sites/16/2015/03/127880648-670x670.jpg" alt="" />
					</label>
          </form>

＆＃13;

复选框图像样式在IE上的窗体内无法正常工作

1 个答案: