Piotr Berebecki Piotr Berebecki - 7 months ago 32
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.


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


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;


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