自定義複選框在選中時不顯示圖像

body { 
    font: 0.8em/21px arial,sans-serif; 
} 
/*checkbox declaration*/ 
.checkbox { 
    width: 19px; 
    height: 25px; 
    padding: 0 5px 0 0; 
    background: url('/karentest/images/selected.png') no-repeat; 
    display: block; 
    clear: left; 
    float: left; 
} 
/* 
    Hide the original checkboxes 
    (but still accessible) 

    :not(#foo) > is a rule filter to block browsers 
       that don't support that selector from 
       applying rules they shouldn't  
*/ 

li:not(#foo) > fieldset > div > span > input[type='checkbox'] { 

    /* Hide the input, but have it still be clickable */ 
    display: none; 
    float: left; 
    width: 19px; 
} 

li:not(#foo) > fieldset > div > span > input[type='checkbox'] + label { 
    margin: 0; 
    display: none;  
    /* Left padding for image */ 
    padding: 5px 0 4px 24px; 
    /* Make look clickable because they are */ 
    cursor: pointer; 

    background: url('/karentest/images/select.png') left center no-repeat; 
} 

/* 
    Change from unchecked to checked graphic 
*/ 

li:not(#foo) > fieldset > div > span > input[type='checkbox']:checked + label { 
    margin: 0; 
    padding: 5px 0 4px 24px; 
    cursor: pointer; 
display: block; 
background: url('/karentest/images/selected.png') left center no-repeat; 
}

這是我的項目的CSS代碼。我想要的是自定義複選框，並且在未選中時顯示圖像，在選中時顯示另一圖像。但是會發生什麼情況是圖像在檢查時不顯示。希望你能幫助我。謝謝！自定義複選框在選中時不顯示圖像

來源

2013-08-07 Kaye

你有沒有試過用其他方式獲得圖像，以確保它們被送達？ – Paul

我試着改變和切換未經檢查和檢查的圖像。但僅顯示處於未選中狀態的圖像。我還沒有嘗試讓他們以其他方式... – Kaye

我也有這個JavaScript代碼。但仍然不起作用（不在檢查狀態下顯示圖像）。 – Kaye

使用chrome或ff開發工具檢查元素以確保樣式正確應用。

來源

2014-02-10 00:25:47 astrocrack

自定義複選框在選中時不顯示圖像

回答

相關問題