CODEWITHSUNDEEP
htmlcss
Vlad
Vlad

Reputation: 145

HTML/CSS Styling Checkbox

I am trying to have a letter being a checkbox so that when the checkbox is clicked the background of the checkbox changes but the letter is still there. So far I got the checkbox to change color when checked, but unable to get letter as a background. Also each checkbox will have a different letter.

.checkbox {
  display: inline-block;
  cursor: pointer;
  font-size: 13px;
  line-height: 18px;
}

input[type=checkbox] {
  display: none;
}

.checkbox:before {
  content: "";
  display: inline-block;
  width: 40px;
  height: 40px;
  vertical-align: middle;
  text-align: center;
  border-width: 5px;
  border-style: solid;
  border-radius: 25px;
}

input[type=checkbox]:checked+.checkbox:before {
  background-color: red;
  background-size: contain;
}
<input type="checkbox" id="checkbox">
<label class="checkbox" for="checkbox"></label>
<label>S</label>

Upvotes: 0

Views: 142

Answers (2)

Michael Coker
Michael Coker

Reputation: 53709

I would put the text in the label, and make the circle absolutely positioned in the label, then use flex to center the text in the label.

.checkbox {
  cursor: pointer;
  font-size: 13px;
  line-height: 18px;
  width: 40px;
  height: 40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

input[type=checkbox] {
  display: none;
}

.checkbox:before {
  content: "";
  position: absolute;
  z-index: -1;
  vertical-align: middle;
  text-align: center;
  border-width: 5px;
  border-style: solid;
  border-radius: 50%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

input[type=checkbox]:checked + .checkbox:before {
  background-color: red;
  background-size: contain;
}
<input type="checkbox"  id="checkbox">
<label class="checkbox" for="checkbox">S</label>

Upvotes: 3

repzero
repzero

Reputation: 8402

Alternative: use position absolute on the label with text "S" and transform translate to center in middle snippet below

.checkbox {
 display: inline-block;
 cursor: pointer;
 font-size: 13px; line-height:18px;
}

input[type=checkbox] {
 display:none;    
}

.checkbox:before {
 content: "";
 display: inline-block;
 width: 40px;
 height: 40px;
 vertical-align: middle;
 text-align: center;
 border-width: 5px;
 border-style: solid;
 border-radius: 25px;

}

input[type=checkbox]:checked + .checkbox:before {
 background-color: red;
 background-size: contain;
}
.checkbox{
position:relative
}
.checkbox label{
position:absolute;
top:0;
left:0;
top:50%;
left:50%;
transform:translate(-50%,-50%)
}
<input type="checkbox"  id="checkbox">
<label class="checkbox" for="checkbox">
<label>S</label>
</label>

Upvotes: 1

Related Questions