jquery移動更改複選框顏色

當選中其他顏色時，如何更改複選框顏色（藍色）和複選框圖標顏色（白色）。jquery移動更改複選框顏色

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
 
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 
 
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 

 
    <form> 
 
     <label> 
 
      <input type="checkbox" name="checkbox-0 ">Check me 
 
     </label> 
 
    </form>

來源

2017-11-11 desmondlee

雖然改變背景顏色是微不足道的CSS，爲圖標的顏色有兩種顏色集：*白色*和*黑*。您可以通過應用「ui-alt-icon」類來顯示*黑色*圖標。您無法着色圖標，因爲圖標圖像未內聯。以下是替代圖標集的參考資料：http：//demos.jquerymobile.com/1.4.5/icons/ – deblocker

對於藍色：

.ui-btn.ui-checkbox-on.ui-btn-a:after { 
    background-color: red !important; 
}

白色的圖標是一個SVG：

.ui-icon-check:after { 
    background-image: url(newicon.svg); 
}

來源

2017-11-11 16:46:32 Nick

所有你需要做的是確定所使用的類由jquery。之後，你可以簡單地套用屬性這樣

.ui-btn.ui-checkbox-on:after { 
 
    background-color: red !important; 
 
} 
 

 
.ui-btn.ui-checkbox-off:after { 
 
    background-color: blue !important; 
 
}

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
 
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 
 
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 

 
<form> 
 
    <label> 
 
      <input type="checkbox" name="checkbox-0 ">Check me 
 
     </label> 
 
</form>

來源

2017-11-11 16:59:32

jquery移動更改複選框顏色

回答

相關問題