How can I make the checkbox label text on bottom

May 12, 2022

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>

>Solution :

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>