HTML/CSS Styling Checkbox

Question

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>

Can you provide an image mockup of what are you expecting to see? — Kevin Jantzer
– Kevin Jantzer, Commented Apr 18, 2017 at 22:14

Michael Coker · Accepted Answer · 2017-04-18 22:30:05Z

3

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>

edited Apr 18, 2017 at 22:30

answered Apr 18, 2017 at 22:15

Michael Coker

53.8k5 gold badges69 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Vlad Over a year ago

Thank you, it works, only thing is that the other content now jomps to a new line, how can I make it retain to in the same line?

Michael Coker Over a year ago

@Vlad what other content?

Vlad Over a year ago

I forgot to post the other code, it is just other html input tags like text inputs and other checkboxs

Michael Coker Over a year ago

@Vlad sure you can use an img in the label or a background-image in CSS. But this is a new/different question. If you can't figure it out and need more help, make a new post and avoid asking for new solutions in the comments.

Michael Coker Over a year ago

@Vlad make sure the id of each input matches the for of each label that it applies to.

|

repzero · Accepted Answer · 2017-04-18 22:18:04Z

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>

Collectives™ on Stack Overflow

HTML/CSS Styling Checkbox

2 Answers 2

11 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related