radiofield style - help

[dekely]

Hi All,
I need to apply iphone style to the radio button which means:

1. hide the gray icon when not selected
2. change the check icon to a smaller check
3. when you tap the row, the row background will be changed for a second.

Appreciate any assistance or tips

Dekel

[supersaiyen]

Here's the CSS for the image mask, took me a while to find the right combination:

.x-checkmark-base.x-input-radio{//so simple, yet so hard to find -.-
  -webkit-mask-image: inline-image('icons/radio.png');
}

[dekely]

I'm afraid it doesn't work, I also tried

.x-checkmark-base.x-input-radio{ 
  -webkit-mask-image: url("../images/More_25x25_Grayed.png");
}

[supersaiyen]

Sorry, meant to say that was SCSS, here's the full CSS snippet

.x-checkmark-base.x-input-radio, .x-field .x-input-radio::after, .x-field .x-input-radio.x-input-checkbox::after, .x-field .x-input-radio:checked::after, .x-field .x-input-radio.x-input-checkbox:checked::after, .x-field.x-item-disabled .x-input-radio:checked::after, .x-field.x-item-disabled .x-input-radio.x-input-checkbox:checked::after, .x-select-overlay .x-item-selected .x-input-radio.x-list-item-label::before, .x-select-overlay .x-item-selected .x-input-radio.x-list-item-label::after {
                -webkit-mask-image: url('resources/images/icons/radio.png');
            }

You can also (as the SCSS does, base-64 encode your image to save a request:

.x-checkmark-base.x-input-radio, .x-field .x-input-radio::after, .x-field .x-input-radio.x-input-checkbox::after, .x-field .x-input-radio:checked::after, .x-field .x-input-radio.x-input-checkbox:checked::after, .x-field.x-item-disabled .x-input-radio:checked::after, .x-field.x-item-disabled .x-input-radio.x-input-checkbox:checked::after, .x-select-overlay .x-item-selected .x-input-radio.x-list-item-label::before, .x-select-overlay .x-item-selected .x-input-radio.x-list-item-label::after {
 -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAElElEQVRoBe2bTWsVVxiAvYlGLRWsVtQ2CKlBYqClKtoiiAtD6aa4cyWKv6ALNy39HUK3XYiIFCoilPqxcCFqqYpC6wfBhdZSPxa2Vk2qTZ/nOHO9Ge/c75vMPfGF586dmTvnvE/OzJmZM5PS1NTUvG5FqVRaTNkD8Ba8D0PwAiqjn5lb8Ds8gUlyesq0K1HqtDCSir0HH8On8CFshkbiZ350Fc7BZbhLfv4hOhYdE0Z0K1lthJ3wCSyBduJvNj4PR+Ei4mfbKay8rS3cDhSk4BF4CB4f3cCyrWNnO7m6bUuyVNwHW+AwPID/oBuilWVah3VZp3X3tSLftDAVLYVvwGNrJkQrpf1undZtDkublW5KmAo2wEGwN80mMtPz5mAuG5qRbliYgvfCdfC0MtNyefWZizntbVS6IWEK3A93YTZ24TzZdLk5mdv+RqRrClOIFwVfgZ1FWkFRp+Zorv21xHOF2dCeeB/ch6JKZvMyV3PO7cFrCXsh8RsU6ZjNCmbnzdWct+a1clVhNlgHP8FzyBZa9HlzNvd11aRfE+aHXvB/C39B0eXy8jN3HRZnpacJ84MS7IabUMQeOU8wu9zcddAl3C+k4lnhUX5wEiYgW0ivzeugy2gq69SeOAR3O56CdsFHMBAW9vaHDrrsStyCTVmYuQ9gG7wT1sTxoYtOuoUIwvwF5jO3HdaC32MJXXTanjiWd+mVLByDFRBb6KSbjvP6MLdnHgH3d8eeYguddBvR1V3ag3sHxNi6aIXQTccBhReAY1He2Mcauum4QOE1sBpi6qzQmRa66bhG4WGIuXXRC6HjsMKD8HZYFPeHjoMKr4IYe+ds8+m4SuHlsCi7NsJ5HZcr7Hl4rkQ4D88V2eBpC8+peCMce3PbwpPgkEjsoeOkwvfA5zSxh473FL4Nj2O3TRxvKzwOj+aAsI7jCjucmT47itXbEVcdbyrs7nwd/oFYQzcdHys8AafAB1Gxhm46TviUze76EvwJMZ6edNLtkq62sHEHToD7eWyhk246vhymxdx3omxy/xKxhU6nEsfyuLSSv8I1eOpMJKGLTrqFSHdpH6p5YB+CG/AirO3tDx10OZS4BZuycOJ2nOkZiOHKSwdddHoV2Gcfma5n7Wn4F3rtEWmar7nrsP41v+wC54k9cAvSAnptau57qrpVXfhyUP5LNurF1x7M2dznV3WrttBlxDL4Dryt6pUWNldzXpbrlbcikXaQ/ig8g6JLm6O5DtZ0qrUykfZRzA9QZGlzM8fhuj71flAh/X1BpZU1t7qywaUR4UTah1Ffg5dqXpDP9i5uDuZiTg2/Nz3tHFxPnoIXwudwEZ7DbElbtzmYy8J6eVeub0o43ZBKhuAAeAcyk61tXdZp3UNpPs1MWxJOK6DSMbBn9Dq8m+KWbR3WNZbW38q07X/j4T2RfpLYBF+Au5ivFmSv0VnUUijqrvsjHINfkGzrxqZtYZIIgbjvinjeHoXPwNYfgWbllbwGJ8G3Yr21u4Oo18dtR8eEKzNB3s7NB9CrwVeGtsBaeDfB78Y4OCIhfr8AV+APeIKk420djf8Bja0Xegposi8AAAAASUVORK5CYII=');
            }