2017-11-11 17 views
0

當選中其他顏色時,如何更改複選框顏色(藍色)和複選框圖標顏色(白色)。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>

+0

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

回答

0

對於藍色:

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

白色的圖標是一個SVG:

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

所有你需要做的是確定所使用的類由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>