0

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)

Nick Div
  • 5,338
  • 12
  • 65
  • 127

1 Answers1

0

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.

Martin
  • 852
  • 7
  • 20
  • I have already tried this, .x-field-mask takes care of only the background of the tick mark. Not the whole field. But appreciate the try. – Nick Div Aug 01 '14 at 23:56
  • That's interesting. It worked for me. What browser are you testing on? You might try to clear the cache. – Martin Aug 02 '14 at 00:25
  • I use cognito mode. but still I did clear it. and I use 10 different machines parellelly for one single visual design so its not possible that I am having a cache issue. I use chrome, IE, safari – Nick Div Aug 03 '14 at 10:26