HTML/CSS樣式複選框

我試圖讓一封信是一個複選框，這樣當複選框被點擊時，複選框的背景會發生變化，但字母仍然存在。到目前爲止，我已經勾選了複選框來更改顏色，但無法將信件作爲背景。另外每個複選框將有不同的字母。HTML/CSS樣式複選框

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

來源

2017-04-18 Vlad

你能提供您期望看到的圖像模型？ –

我會把文字的標籤，讓LY定位在標籤的圓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>

來源

2017-04-18 22:15:56

謝謝，它的工作原理是，其他內容現在跳到一個新的行，我怎麼能讓它保留在同一行？ – Vlad

@Vlad什麼其他內容？ –

我忘了發佈其他代碼，它只是其他的HTML輸入標籤，如文本輸入和其他複選框 – Vlad

替代方案：使用位置文本「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>

來源

2017-04-18 22:18:04 repzero

HTML/CSS樣式複選框

回答

相關問題