HTML / CSS样式复选框

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> 

Answer 1

I would put the text in the label, and make the circle absolute ly 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> 

Answer 2

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>