渲染兩個純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複選框的問題

回答

相關問題