渲染两个纯CSS复选框的问题

我试图想出一个纯CSS（不使用第三方库）复杂的复选框。只要我必须渲染一个复选框，代码似乎工作正常。但是当我添加第二个复选框时，第二个元素被渲染在第一个元素的顶部。第二个问题涉及标签文本。有任何想法吗？渲染两个纯CSS复选框的问题

.checkboxFive { 
 
    position: relative; 
 
} 
 

 
.checkboxFive input { 
 
    display: none; 
 
} 
 

 
.checkboxFive label { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    width: 12px; 
 
    height: 12px; 
 
    background: #eee; 
 
    border: 1px solid #ddd; 
 
} 
 

 
.checkboxFive label:after { 
 
    opacity: 0; 
 
    content: ''; 
 
    position: absolute; 
 
    width: 11px; 
 
    height: 4px; 
 
    background: transparent; 
 
    border: 2px solid #333; 
 
    border-top: none; 
 
    border-right: none; 
 
    transform: rotate(-45deg); 
 
} 
 

 
.checkboxFive label:hover::after { 
 
    opacity: 0.5; 
 
} 
 

 
.checkboxFive input[type=checkbox]:checked + label:after { 
 
    opacity: 1; 
 
}

<div class="checkboxFive"> 
 
    <input type="checkbox" value="1" name="" /> 
 
    <label for="checkboxFiveInput">Option 1</label> 
 
</div> 
 

 
<div class="checkboxFive"> 
 
    <input type="checkbox" value="1" name="" /> 
 
    <label for="checkboxFiveInput">Option 2</label> 
 
</div>

这里有一个选项的情况下所期望的效果。

.checkboxFive { 
 
     position: relative; 
 
    } 
 

 
    .checkboxFive input { 
 
     display: none; 
 
    } 
 

 
    .checkboxFive label { 
 
     cursor: pointer; 
 
     position: absolute; 
 
     width: 12px; 
 
     height: 12px; 
 
     background: #eee; 
 
     border: 1px solid #ddd; 
 
    } 
 

 
    .checkboxFive label:after { 
 
     opacity: 0; 
 
     content: ''; 
 
     position: absolute; 
 
     width: 11px; 
 
     height: 4px; 
 
     background: transparent; 
 
     border: 2px solid #333; 
 
     border-top: none; 
 
     border-right: none; 
 
     transform: rotate(-45deg); 
 
    } 
 

 
    .checkboxFive label:hover::after { 
 
     opacity: 0.5; 
 
    } 
 

 
    .checkboxFive input[type=checkbox]:checked + label:after { 
 
     opacity: 1; 
 
    }

<div class="checkboxFive"> 
 
     <input type="checkbox" value="1" id="checkboxFiveInput" name="" /> 
 
\t \t <label for="checkboxFiveInput"></label> 
 
\t </div>

来源

2017-03-07 Edgar Navasardyan

这是使用'位置的缺点：绝对的;' – gyre

是的，我知道。但是，如何更新代码以保持所需的效果并同时摆脱此问题？ –

这样的事情，https://lokesh-coder.github.io/pretty-checkbox/？ –

的问题是与你的父母。您需要提供填充/边距或特定高度来修复它。

.checkboxFive { 
    position: relative; 
    padding:10px; 
    float:left 
}

.checkboxFive { 
 
    position: relative; 
 
    padding:10px; 
 
    float:left 
 
} 
 

 
.checkboxFive input { 
 
    display: none; 
 
} 
 

 
.checkboxFive label { 
 
    content: ''; 
 
    cursor: pointer; 
 
    position: absolute; 
 
    width: 12px; 
 
    height: 12px; 
 
    background: #eee; 
 
    border: 1px solid #ddd; 
 
} 
 

 
.checkboxFive label:before { 
 
    opacity: 0; 
 
    content: ''; 
 
    position: absolute; 
 
    width: 11px; 
 
    height: 4px; 
 
    background: transparent; 
 
    border: 2px solid #333; 
 
    border-top: none; 
 
    border-right: none; 
 
    transform: rotate(-45deg); 
 
} 
 

 
.checkboxFive label:hover::before { 
 
    opacity: 0.5; 
 
} 
 
.checkboxFive input[type=checkbox]:checked + label:before { 
 
    opacity: 1; 
 
}

<div class="checkboxFive"> 
 
    <input type="checkbox" value="1" name="" /> 
 
    <label for="checkboxFiveInput"></label> 
 
</div> 
 
<div class="checkboxFive"> 
 
    <input type="checkbox" value="2" name="" /> 
 
    <label for="checkboxFiveInput"></label> 
 
</div>

来源

2017-03-07 07:05:52

渲染两个纯CSS复选框的问题

回答

相关问题