自定義複選框樣式 - 標籤跳轉檢查/取消選中

Question

我正在使用CSS3設計複選框。一切工作正常，只是當我檢查並取消選中複選框時，標籤跳轉。你能告訴我爲什麼嗎？

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

 
input[type="checkbox"] + label::before{ 
 
    background-color: white; 
 
    border: 1px solid #ccc; 
 
    content: ''; 
 
    display: inline-block; 
 
    height: 15px; 
 
    width: 15px; 
 
    text-align: center; 
 
    margin: 0 5px -2px 0; 
 
} 
 

 
input[type="checkbox"]:checked + label::before{ 
 
    content: '\2713'; 
 
}

<div> 
 
    <input type="checkbox" id="checkbox1"> 
 
    <label for="checkbox1">Check 1</label> 
 
</div>

Answer 1

您可以將overflow hidden添加到您的僞元素以防止跳躍效果。我也更新了一點CSS以彌補溢出以及箭頭沒有真正居中在盒子中的事實。

JSFIDDLE Example

這是我對此採取：

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

input[type="checkbox"] + label::before{ 
    background-color: white; 
    border: 1px solid #ccc; 
    content: ''; 
    display: inline-block; 
    height: 22px; /*Change width and height to compensate*/ 
    width: 22px; 
    text-align: center; 
    margin: 0 5px -2px 0; 
    /*Added styles*/ 
    overflow: hidden; 
    top: 3px; 
    position: relative; 
} 

input[type="checkbox"]:checked + label::before{ 
    content: '\2713'; 
} 

Answer 2

可以使position僞元素絕對的，並相應地把它。

這是一個解決方案。

div 
 
{ 
 
    padding-left:20px; 
 
} 
 
input[type="checkbox"]{ 
 
    display:none; 
 
} 
 

 
input[type="checkbox"] + label::before{ 
 
    background-color: white; 
 
    border: 1px solid #ccc; 
 
    content: ''; 
 
    display: inline-block; 
 
    height: 15px; 
 
    width: 15px; 
 
    text-align: center; 
 
    margin: 0 5px -2px 0; 
 
    position:absolute; 
 
    left:10px; 
 
} 
 

 
input[type="checkbox"]:checked + label::before{ 
 
    content: '\2713'; 
 
}

<div> 
 
    <input type="checkbox" id="checkbox1"> 
 
    <label for="checkbox1">Check 1</label> 
 
</div>

可能有其他吸引人的解決方案也是如此，這只是其中的一個。

Answer 3

更新

據報道由OP，有（是什麼？）跳躍行爲仍然存在上演示。我添加了2個可能解決問題的屬性。我得到了相同的預期結果，所以我不能自己測試（很難解決你看不到的問題）。

附加CSS

margin: 0 5px -5px 0; 
    line-height: 100%; 
    position: relative; // This should keep the input positioned in one spot. 
    float: left; // This should keep any extra movements of label and/or input from jumping as well. 

添加這些2種性能的一點是，它們兩者取元件（一個或多個）從文件的正常流的，因此具有很少或幾乎沒有相互作用與通常可能推動或取代輸入和/或標籤的其他元素一起使用。

---

• 尋找那些時髦的保證金抵消，以抵消跳躍的行爲將永遠得到補充上。

• 平衡了NEG和POS值

• ，並添加line-height: 100%

  margin: 0 5px -5px 0; line-height: 100%;

還帶有fieldset這是沒有必要的，它只是看起來更好取代了div。:)

input[type="checkbox"] { 
 
    display: none; 
 
} 
 
input[type="checkbox"] + label::before { 
 
    background-color: white; 
 
    border: 1px solid #ccc; 
 
    content: ''; 
 
    display: inline-block; 
 
    height: 15px; 
 
    width: 15px; 
 
    text-align: center; 
 
    margin: 0 5px -5px 0; 
 
    line-height: 100%; 
 
    position: relative; 
 
    float: left; 
 
} 
 
input[type="checkbox"]:checked + label::before { 
 
    content: '\2713'; 
 
}

<fieldset> 
 
    <input type="checkbox" id="checkbox1"> 
 
    <label for="checkbox1">Check 1</label> 
 
</fieldset>