爲什麼選擇這些複選框被單選按鈕會跳轉？

我正在使用複選框標籤hack爲單選按鈕添加特殊的複選框樣式樣式。我有兩個複選框樣式，常規和.angabe。爲什麼選擇這些複選框被單選按鈕會跳轉？

正如您在JSFiddle中看到的那樣，當檢測到.angabe收音機時，方框會向上「跳」幾個像素。已嘗試了幾個不同的頂部：位置沒有好的效果。有什麼建議麼？

這裏的加價：

<div class="angabe"> 
    <input type="radio" value="1" id="ohne"> 
    <label for="ohne">Mit Angabe</label> 
    <input type="radio" value="0" id="mit"> 
    <label for="mit">Ohne Angabe</label> 
</div> 

<div class="row"> 
    <input type="radio" id="pregnancy[1]"><label for="pregnancy[1]">Pregnancy 1</label> 
    <input type="radio" name="[pregnancy]" value="3" id="pregnancy[3]"><label for="pregnancy[3]">Pregnancy 2</label> 
    <input type="radio" name="[pregnancy]" value="3" id="pregnancy[5]"><label for="pregnancy[5]">Pregnancy 3</label> 
</div>

而CSS（剝離長梯度聲明，但仍然相當長）：

body:nth-of-type(1) input[type="radio"], body:nth-of-type(1) .module.forms .indicationbox input { 
    display: none; 
} 

body:nth-of-type(1) input[type="radio"] + label  { 
    position:relative; 
    margin-left:20px; 
} 

body:nth-of-type(1) input[type="radio"] + label:after { 
    position:absolute; 
    left:4px; 
    top:7px; 

    content: "\00a0"; /* character: space */ 
    height: 10px; 
    width: 10px; 
    display: inline-block; 
    font-size: 12px; 
    line-height: 14px; 
    text-align: center; 

    -webkit-box-shadow: inset 1px 2px 3px rgba(50, 50, 50, 0.5); 
    -moz-box-shadow: inset 1px 2px 3px rgba(50, 50, 50, 0.5); 
    box-shadow:   inset 1px 2px 3px rgba(50, 50, 50, 0.5); 

    background:#c6e0b3; 
} 

body:nth-of-type(1) input[type="radio"] + label:before { 
    left:0px; 
    top:0px; 
    content: "\00a0"; /* character: space */ 
    height: 18px; 
    width: 18px; 
    margin-right:5px; 
    display: inline-block; 
    font-size: 12px; 
    line-height: 16px; 
    padding:0px; 
    text-align: center; 
    background-color: #ebd196; 
    -webkit-box-shadow: 1px 2px 3px rgba(50, 50, 50, 0.5); 
    -moz-box-shadow: 1px 2px 3px rgba(50, 50, 50, 0.5); 
    box-shadow:   1px 2px 3px rgba(50, 50, 50, 0.5); 
} 

body:nth-of-type(1) input[type="radio"]:checked + label:after { 
    content: "\02714"; /* character: tick mark */ 
} 


/** Special Angabe radio styles **/ 
body:nth-of-type(1) .angabe input[type="radio"]:checked + label:before { 
    top: 0px; 
    left:0px; 
    height: 11px; 
    width: 11px; 
    border: 4px solid #324b23; 
    background: rgba(255,255,255,0.4); 
} 

body:nth-of-type(1) .angabe input[type="radio"]:checked + label:after { 
    top: 6px; 
    left:6px; 
    width:7px; 
    height:7px; 
    background: #324b23; 
} 

body:nth-of-type(1) .angabe input[type="radio"]:checked + label:after { 
    content: "\00a0"; /* character: space */ 
}

來源

2013-10-17 Ila

試試這個變化：

body:nth-of-type(1) input[type="checkbox"] + label:after, body:nth-of-type(1) input[type="radio"] + label:after { 
top: 3px; 
} 
body:nth-of-type(1) input[type="checkbox"] + label:before, body:nth-of-type(1) input[type="radio"] + label:before { 
position: relative; 
top: -4px; 
} 
body:nth-of-type(1) .angabe input[type="radio"]:checked + label:before { 
top: 1px; 
margin-right: 4px; 
}

JSFIDDLE

來源

2013-10-17 12:08:37

爲什麼選擇這些複選框被單選按鈕會跳轉？

回答

相關問題