I need to build this image structure, but I can not get the radio input to be on top of the image using MaterializeCSS. Anyone know of a solution? Hugs!
HTML Ex:
<p>
<input name="group1" type="radio" id="test1" />
<label for="test1"><img src="" alt="" class=""></label>
</p>
Dude with this HTML structure with the image inside label was a little complicated ... but it worked! It was necessary to adjust the position in classes of label ::before and ::after Maybe you need to make an adjustment in top of ::after to be adjusted with your images, but I left comment in the code ok
See the example working.
.custom-radio [type="radio"]+label:before, .custom-radio [type="radio"]+label:after{
content: "";
display: block;
margin: 4px auto;
position: initial;
}
.custom-radio [type="radio"]+label:after {
position: relative;
top: -82px !important; /* ajuste a altura conforma o tamanho da imagem */
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<p class="custom-radio">
<input name="group1" type="radio" id="test1" />
<label for="test1"><img src="http://placeskull.com/80/50"alt="" class=""></label>
<input name="group1" type="radio" id="test2" />
<label for="test2"><img src="http://placeskull.com/81/50"alt="" class=""></label>
<input name="group1" type="radio" id="test4" />
<label for="test4"><img src="http://placeskull.com/79/50"alt="" class=""></label>
</p>