为什么选择这些复选框被单选按钮会跳转？

我正在使用复选框标签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

为什么选择这些复选框被单选按钮会跳转？

回答

相关问题