Piotr Berebecki Piotr Berebecki - 1 month ago 5
CSS Question

How to make the checkbox to cover 100% width and 100% height of a sqaure container?

I've been able to place a checkbox on top of a dynamically sized (responsive) div but now I need to make it so that the checkbox covers 100% width and 100% height of this div.

Here is my codepen: http://codepen.io/PiotrBerebecki/pen/yadEOP
where at the moment I just temporarily hardcoded the width and the height of the checkbox.

HTML:

<div id="container">
<input type="checkbox">
<img src="http://placekitten.com/400/400">
</div>


CSS:

body {
display: flex;
flex-direction: column;
align-items: center;
}

#container {
width: 50%;
border: solid 4px tomato;
}

img {
display: block;
width: 100%;
height: auto;
}

input {
position: absolute;
width: 100px;
height: 100px;
opacity: 0.75;
}

Answer

First you need create a stacking context for the checkbox, then you add width and height of 100%. Done.

#container { /*create stacking context first*/ position: relative; }

input { width: 100%; height: 100%; }

Full example: codepen

Comments