jquery mobile更改复选框颜色

Posted 2023-05-09

【中文标题】jquery mobile更改复选框颜色

【英文标题】：jquery mobile change checkbox color

【发布时间】：2018-04-24 16:51:03

【问题描述】：

选中其他颜色时，如何将复选框颜色（蓝色）和复选框图标颜色（白色）更改为其他颜色。

   <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>

【问题讨论】：

虽然改变背景颜色是微不足道的 CSS，但对于图标颜色，您有两种颜色集：white 和 black。您可以通过应用ui-alt-icon 类来显示黑色 图标。您无法为图标着色，因为图标图像未内联。这是备用图标集的参考：demos.jquerymobile.com/1.4.5/icons

【参考方案1】：

您需要做的就是确定 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>

【参考方案2】：

蓝色：

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

白色图标是 SVG：

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