How can I make the checkbox label text on bottom-CodePudding

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 >
  <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>

CodePudding user response：

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 >
  <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>

CodePudding user response：

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 >
<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>