CODEWITHSUNDEEP
htmlcss
Toni BCN
Toni BCN

Reputation: 392

Use Image instead of radio button with text below image

I use following example to use images instead radiobutton http://jsbin.com/image-instead-of-radio-button/5/ from user @Roko C. Buljan and the css code is:

label > input{ /* HIDE RADIO */
  visibility: hidden; /* Makes input not-clickable */
  position: absolute; /* Remove input from document flow */
}
label > input + img{ /* IMAGE STYLES */
  cursor:pointer;
  border:2px solid transparent;
}
label > input:checked + img{ /* (RADIO CHECKED) IMAGE STYLES */
  border:2px solid #f00;
}

And the Html cose is:

<label class="layersMenu">
    <input type="radio" id="radioZoom14" name="zoomsMBtiles" value="14" checked />
    <img src="./img/zoom14.jpg">
</label>

<label class="layersMenu">
    <input type="radio" id="radioZoom18" name="zoomsMBtiles" value="18" />
    <img src="./img/zoom18.jpg">
</label>

This is good, however, now I need to put some text below image, but I didn't got it using a div (block content) next to img.

<label class="layersMenu">
    <input type="radio" id="radioZoom14" name="zoomsMBtiles" value="14" checked />
    <img src="./img/zoom14.jpg">
    <div>my text 1</div>
</label>

<label class="layersMenu">
    <input type="radio" id="radioZoom18" name="zoomsMBtiles" value="18" />
    <img src="./img/zoom18.jpg">
    <div>my text 2</div>
</label>

Text appears right side next to image.

Any idea?

Thanks in advance

Upvotes: 0

Views: 6345

Answers (1)

StudioTime
StudioTime

Reputation: 23999

Make the label display: inline-block will fix it for you

label { display: inline-block }
label > input { /* HIDE RADIO */
  visibility: hidden; /* Makes input not-clickable */
  position: absolute; /* Remove input from document flow */
}
label > input + img { /* IMAGE STYLES */
  cursor:pointer;
  border:2px solid transparent;
}
label > input:checked + img { /* (RADIO CHECKED) IMAGE STYLES */
  border:2px solid #f00;
}
<label class="layersMenu">
    <input type="radio" id="radioZoom14" name="zoomsMBtiles" value="14" checked />
    <img src="./img/zoom14.jpg">
    <div>blah</div>
</label>

<label class="layersMenu">
    <input type="radio" id="radioZoom18" name="zoomsMBtiles" value="18" />
    <img src="./img/zoom18.jpg">
  <div>blah</div>
</label>

Upvotes: 2

Related Questions