How can I make the checkbox label text on bottom

Question

I'm trying to place checkbox label just below the checkbox icon. I've tried using flexbox but label text is showing just right to the check box.

 .myclass{ display:flex; flex-direction:row; } input[type="checkbox"]{ display:flex; cursor: pointer; -webkit-appearance: none; appearance: none; background: #34495E; border-radius: 1px; box-sizing: border-box; position: relative; box-sizing: content-box ; width: 50px; height: 70px; border-width: 0; transition: all .3s linear; } input[type="checkbox"]:checked{ background-color: #2ECC71; } input[type="checkbox"]:focus{ outline: 0 none; box-shadow: none; }

 <div class="myclass"> <input type="checkbox" id="business" name="business" value="Business"> <label for="business">Business</label> <input type="checkbox" id="business" name="business" value="Business"> <label for="business">Business</label> </div>

Answer 1

Your code is almost good but you need to wrap label and input within another div to separate those groups.

 .myclass { display: flex; flex-direction: row; } input[type="checkbox"] { display: flex; cursor: pointer; -webkit-appearance: none; appearance: none; background: #34495E; border-radius: 1px; box-sizing: border-box; position: relative; box-sizing: content-box; width: 50px; height: 70px; border-width: 0; transition: all .3s linear; } input[type="checkbox"]:checked { background-color: #2ECC71; } input[type="checkbox"]:focus { outline: 0 none; box-shadow: none; }

 <div class="myclass"> <div> <input type="checkbox" id="business" name="business" value="Business"> <label for="business">Business</label> </div> <div> <input type="checkbox" id="business" name="business" value="Business"> <label for="business">Business</label> </div> </div>

Answer 2

Wrap the input and label in div and add flex with direction column.

 .myclass{ display:flex; flex-direction:row; } input[type="checkbox"]{ display:flex; cursor: pointer; -webkit-appearance: none; appearance: none; background: #34495E; border-radius: 1px; box-sizing: border-box; position: relative; box-sizing: content-box ; width: 50px; height: 70px; border-width: 0; transition: all .3s linear; } input[type="checkbox"]:checked{ background-color: #2ECC71; } input[type="checkbox"]:focus{ outline: 0 none; box-shadow: none; } .checkbox-container{ display:flex; flex-direction:column; }

 <div class="myclass"> <div class="checkbox-container"> <input type="checkbox" id="business" name="business" value="Business"> <label for="business">Business</label> </div> <div class="checkbox-container"> <input type="checkbox" id="business" name="business" value="Business"> <label for="business">Business</label> </div> </div>