CSS復選框在其他頁面上的樣式有所不同

Question

我有一個正在使用的網站，需要在選中復選框時更改其樣式。 這是我的CSS：

.settings-content input[type="checkbox"] {
    display: none;
}

.settings-content input[type="checkbox"] + label span {
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url('../img/checkbox.png') no-repeat;
    background-size: cover;
    cursor: pointer;
    margin-right: 10px;
}

.settings-content input[type="checkbox"]:checked + label span {
    background:url('../img/checkbox_checked.png') no-repeat;
    background-size: cover;
}

.settings-content input[type="checkbox"] + label span{
    width: 12px;
    height: 12px;
    margin-right: 12px;
}

HTML：

<li>
  <input type="checkbox" name="cosmetics" />
  <label for="cosmetics">
    <span></span>
  </label>
</li>

我在首頁上添加了復選框，並且自定義樣式在首頁上可以正常使用，但是在嘗試在其他頁面上使用完全相同的標記和樣式添加復選框時遇到了問題。

這是帶有工作復選框的主頁： http : //tinyurl.com/pv62h8

這是復選框不起作用的設置頁面： http : //tinyurl.com/npfegb

您可以在設置頁面上看到背景圖像已正確更改，但是當您單擊復選框時，沒有任何反應。 他們從不進入檢查狀態。 如果我更改標記以使其默認為選中狀態，則顯示為選中狀態，但是單擊時仍然沒有任何顯示。

我不明白為什么它不起作用，因為兩個頁面上的樣式都相同。 我對可能的原因一無所知。

任何幫助，將不勝感激。

謝謝。

Answer 1

CSS不一樣。

主頁用途：

.home-content input[type="checkbox"]:checked + span {

設置頁面用途：

.settings-content input[type="checkbox"]:checked + label span {

“標簽”部分應該在那里嗎？

編輯 ：您的JS使用.home-content來激活復選框。 您需要添加對.settings-content元素的引用以處理檢查。

$('.home-search .dropdown-menu a, .sh-search .dropdown-menu a').on( 'click', function( event ) {

   var $target = $( event.currentTarget ),
       val = $target.attr( 'data-value' ),
       $inp = $target.find( 'input' ),
       idx;

   if ( ( idx = options.indexOf( val ) ) > -1 ) {
      options.splice( idx, 1 );
      setTimeout( function() { $inp.prop( 'checked', false ) }, 0);
   } else {
      options.push( val );
      setTimeout( function() { $inp.prop( 'checked', true ) }, 0);
   }

   $( event.target ).blur();
   $(".home-search .dropdown-search-btn, .sh-search .dropdown-search-btn").text(options.join(", "));
   return false;
});