CODEWITHSUNDEEP
htmlcss
Vivek Nath R
Vivek Nath R

Reputation: 171

How can I make the checkbox label text on bottom

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>

Upvotes: 1

Views: 180

Answers (2)

Shubham Mistry
Shubham Mistry

Reputation: 159

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>

Upvotes: 2

Nick Vu
Nick Vu

Reputation: 15520

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>

Upvotes: 2

Related Questions