在Sencha Touch 1.1中區分Radiofield和Checkbox字段的外觀

Question

默認情況下，Sencha Touch 1.1提供radiofield和checkboxfield，其中顯示覆選標記（打勾）。由於這種設計，沒有可視化的方式來區分它們。

我怎樣才能改變radiofield，這樣它看起來像一個傳統的單選按鈕的外觀？

Answer 1

我添加了自己的樣式來改變複選框的外觀。

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

Answer 2

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

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