HTML / CSS樣式復選框

Question

我正在嘗試將字母作為復選框，以便單擊該復選框時，該復選框的背景會更改，但該字母仍然存在。 到目前為止，我已選中該復選框以在選中時更改顏色，但無法獲取字母作為背景。 另外，每個復選框都有一個不同的字母。

 .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

我將文本放入標簽中，並使圓absolute位於標簽中，然后使用flex將文本置於標簽中。

 .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

備選方案：在標簽上使用文本“ S”的絕對位置，並將其轉換為以下中間代碼段的中心

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