All geek questions in one place

Differentiated view of the Radiofield and Checkbox field in Sencha Touch 1.1

By default, Sencha Touch 1.1 provides a radiofield and checkboxfield that show a radiofield . Because of this design, there is no visual way to distinguish between them.

Sencha touch radiofield

How to change the appearance of the radiofield so that it looks like a traditional switch?

+4
source share
2 answers

I added my own styles to change the appearance of the checkbox.

 .x-field .x-input-radio:after, .x-field .x-input-radio:checked:after { content: ""; position: absolute; width: 1.25em; height: 1.25em; top: 50%; left: auto; -webkit-transform: rotate(0deg) skew(0deg); -webkit-transform-origin: 50% 50%; -webkit-border-radius: 2em; right: 1.1em; border: .45em solid; margin-top: -0.75em; } .x-field .x-input-radio:checked:after { border-color: #06346a; } .x-field .x-input-radio:after { border-color: #dddddd; }
+2
source 
 .x-field .x-input-radio:after, .x-field.x-item-disabled .x-input-radio:checked:after { content: ""; position: absolute; width: 1.4em; height: 1.4em; top: 50%; left: auto; right: 1.1em; -webkit-mask-image: url(); margin-top: -0.7em; border-radius: 15px; } .x-field .x-input-radio:checked:after { content: ""; position: absolute; top: 50%; left: auto; right: 1.1em; -webkit-mask-image: url(); margin-top: -0.7em; border: 5px solid #dddddd; border-radius: 15px; }

Link: http://tjwebb.wordpress.com/2012/03/24/how-to-override-the-default-sencha-touch-2-radio-field-style/

0
source

Source: https://habr.com/ru/post/1391374/

More articles:


All Articles