僞元素不顯示

我想補充::之前和::對於複選框after僞元素，但經過psudo沒有顯示，當我們選中該複選框項目僞元素不顯示

以下CSS和HTML元素我用

.multiselect-container li input { 
 
    opacity: 0; 
 
    position: relative !important; 
 
    left: -4px; 
 
    top: 2px; 
 
    z-index: 999; 
 
} 
 
.multiselect-container li { 
 
    position: relative; 
 
} 
 
.multiselect-container li label { 
 
    padding: 4px 20px 3px 40px !important; 
 
} 
 
.multiselect-container li span::before { 
 
    width: 20px; 
 
    height: 20px; 
 
    border: 1px solid #ccc; 
 
    position: absolute; 
 
    content: ''; 
 
    left: 12px; 
 
    top: 5px; 
 
} 
 
.multiselect-container li span::after { 
 
    width: 18px; 
 
    height: 18px; 
 
    background: #093c73 url(../images/tick.png) no-repeat 2px 2px; 
 
    position: absolute; 
 
    content: ''; 
 
    left: 13px; 
 
    top: 6px; 
 
    display: none; 
 
} 
 
.multiselect-container li input[type="checkbox"]:checked + .multiselect-container li span::after { 
 
    display: block; 
 
}

<ul class="multiselect-container"> 
 
    <li> 
 
    <label class="checkbox"> 
 
     <input type="checkbox" value="option1">Option1</label> 
 
    <span></span> 
 
    </li> 
 
</ul>

來源

2017-01-23 Sudeep

你的最後一個選擇是錯誤的。您試圖選擇一個匹配選擇器'.multiselect-container li span'的元素，表示選中的輸入字段的後面的兄弟節點 - 但當然沒有這樣的元素。 – CBroe

仔細檢查在CSS VS的HTML的結構選擇。你不能像你在CSS中輸入那樣做選擇器。

跨度需要在輸入後直接輸入：複選框，而不是標籤後面。

.multiselect-container li input { 
 
    opacity: 0; 
 
    position: relative !important; 
 
    left: -4px; 
 
    top: 2px; 
 
    z-index: 999; 
 
} 
 

 
.multiselect-container li { 
 
    position: relative; 
 
} 
 

 
.multiselect-container li label { 
 
    padding: 4px 20px 3px 40px !important; 
 
} 
 

 
.multiselect-container li span::before { 
 
    width: 20px; 
 
    height: 20px; 
 
    border: 1px solid #ccc; 
 
    position: absolute; 
 
    content: ''; 
 
    left: 12px; 
 
    top: 5px; 
 
} 
 

 
.multiselect-container li span::after { 
 
    width: 18px; 
 
    height: 18px; 
 
    background: #093c73 url(../images/tick.png) no-repeat 2px 2px; 
 
    position: absolute; 
 
    content: ''; 
 
    left: 13px; 
 
    top: 6px; 
 
    display: none; 
 
} 
 

 
.multiselect-container li input[type="checkbox"]:checked + span::after { 
 
    display: block; 
 
}

<ul class="multiselect-container"> 
 
    <li> 
 
    <label class="checkbox"> 
 
     <input type="checkbox" value="option1">Option1 
 
     <span></span> 
 
    </label> 
 
    </li> 
 
</ul>

來源

2017-01-23 09:52:07 seemly

僞元素不顯示

回答

相關問題