how to change checkbox/radio style

[cbweixin]

I have 2 question about checkbox/radio widget:

1. how could change the icon for checkbox /radio. currently they are all tick mark, I want to change the radio button to the standard radio button. I read the css for them and fail to figure out how the tick mark has been created. It seems the tick marks is made purely by CSS. Could someone give some elaboration how to change them.

radio.jpg


2. label is always put on the left of checkbox/radio icon. how could I put it on the right? just like a standard radio button, there is a round circle following by some text.

your help would be greatly appreciated.

[NickT]

add this to your checkbox... build something as you desire for the radio in this same fashion

    baseCls: 'x-plain',    renderTpl: [
        '<tpl if="fieldEl"><input id="{inputId}" type="{inputType}" name="{name}" class="{fieldCls}" tabIndex="-1" ',
        '<tpl if="checked"> checked </tpl>',
        ' value="{inputValue}">&nbsp;{label}</input>',
        '</tpl>'
    ],

[cbweixin]

thanks a lot for the help. It really works fine now.

I spend some time on the checkbox/radio css, I found the tickmark is drawn by the css listed below:

.x-checkmark-base, .x-item-selected .x-list-selected::before, .x-item-selected .x-list-selected::after, .x-field .x-input-radio::after, .x-field .x-input-checkbox::after, .x-field .x-input-radio:checked::after, .x-field .x-input-checkbox:checked::after {
content: "";
position: absolute;
width: .75em;
height: 1.25em;
top: 50%;
left: auto;
-webkit-transform: rotate(45deg) skew(5deg);
-webkit-transform-origin: 50% 50%;
right: 1.1em;
border: .35em solid;
border-top: none;
border-left: none;
margin-top: -0.75em;
-webkit-transform-origin-x: 50%;
-webkit-transform-origin-y: 50%;
}

I think the 'left' property control the position of the tickmark. I tried override this value, the tickmark's position would be changed.

thanks a lot for your guys' help.

[grotesque13]

add this to your checkbox... build something as you desire for the radio in this same fashion

    baseCls: 'x-plain',    renderTpl: [
        '<tpl if="fieldEl"><input id="{inputId}" type="{inputType}" name="{name}" class="{fieldCls}" tabIndex="-1" ',
        '<tpl if="checked"> checked </tpl>',
        ' value="{inputValue}">&nbsp;{label}</input>',
        '</tpl>'
    ],

Hello, how i can do back to front - radio button with chekbox style?