2017-11-11 237 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>