How to change the background-color of checkbox field in sencha touch on checked event using only CSS

Question

I have this code that changes the styling of the checkbox "tick" mark on selecting the checkbox,

.x-input-checkbox:checked  + .x-field-mask:after {
//Your style here
}

P.S. The above code is only for the check mark not the whole field.

but I dont know how to change the background color of the checkbox field on selecting it using purely CSS (the whole field)

Answer 1

You have to manipulate the .x-field-mask class. .x-field-mask:after is only used to draw the tick.

.x-field-mask {
  background-color: green;
}

should do the trick.