Checkbox Materializecss label

Asked

Viewed 34 times

1

I need to build this image structure, but I can’t get the radio input to stay on top of the image using Materializecss. Does anyone know any solution? Hug!

Ex of HTML: 

<p>
   <input name="group1" type="radio" id="test1" />
   <label for="test1"><img src="" alt="" class=""></label>
</p>

Imagem de ex.

html css materialize

1 answer

1


Face with this HTML structure with the image inside the label it got a little complicated... but it worked! We had to adjust the position in the classes of label ::before and ::after Maybe you need to make an adjustment top of ::after to be adjusted with your images, but I left the comment in the code ok

See 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>

Browser other questions tagged html css materialize

You are not signed in. Login or sign up in order to post.