CODEWITHSUNDEEP
jquerycssjquery-mobile
desmondlee
desmondlee

Reputation: 1703

jquery mobile change checkbox color

How can i change the checkbox color(blue) and checkbox icon color(white) when checked to other colors.

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

Upvotes: 0

Views: 682

Answers (2)

Sanchit Patiyal
Sanchit Patiyal

Reputation: 4920

All you need to do is identify the class which is used by jquery. After that you can simply apply the property like this

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

Upvotes: 1

Nick
Nick

Reputation: 417

For blue color:

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

The white icon is a SVG:

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

Upvotes: 0

Related Questions