亲爱的大家,我有 5 个被动表情符号,下面有 5 个可点击的图像,它们取代了单选按钮。 当您查看它时,透明度(不透明度)会更改为 50%。效果很好。 我想要的是选择图像时图像周围有一个持久的边框。例如单选按钮。 这可能吗?
这就是我所拥有的;
<div class="mydiv" style="padding-left: 80px">
<input type="radio" name="keuze" value="1" id="radio">
<label for="male-radio1"><img src="img/getal1.jpg"></label>
<input type="radio" name="keuze" value="2" id="radio">
<label for="male-radio2"><img src="img/getal2.jpg"></label>
<input type="radio" name="keuze" value="3" id="radio">
<label for="male-radio3"><img src="img/getal3.jpg"></label>
<input type="radio" name="keuze" value="4" id="radio">
<label for="male-radio4"><img src="img/getal4.jpg"></label>
<input type="radio" name="keuze" value="5" id="radio">
<label for="male-radio5"><img src="img/getal5.jpg"></label>
</div>
Input[type="radio"]{
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.mydiv :hover{
opacity: 0.7;
cursor: pointer;
}
.mydiv img:active {
opacity: 0.5;
cursor: crosshair;
border: solid;
border-color: red;
}
我找到了解决方案,并且效果很好。
<div style="padding-left: 85px">
<label>
<input type="radio" name="sc" value="1" />
<img style="width: 137px" src="img/getal1.jpg">
</label>
<label>
<input type="radio" name="sc" value="2"/>
<img style="width: 137px" src="img/getal2.jpg">
</label>
<label>
<input type="radio" name="sc" value="3" />
<img style="width: 137px" src="img/getal3.jpg">
</label>
<label>
<input type="radio" name="sc" value="4" />
<img style="width: 137px" src="img/getal4.jpg">
</label>
<label>
<input type="radio" name="sc" value="5" />
<img style="width: 137px" src="img/getal5.jpg">
</label>
</div>
CSS
label > input{ /* HIDE RADIO */
display:none;
}
label > input + img{ /* IMAGE STYLES */
cursor:pointer;
border:2px solid transparent;
}
label > input:hover + img{ /* (CHECKED) IMAGE STYLES */
opacity: 0.7;
}
label > input:checked + img{ /* (CHECKED) IMAGE STYLES */
border:2px solid;
border-color: blue;
}