Can I apply a theme that is partially different?

Form components
1

I use the default theme ios.
But I want to use Windows theme only checkbox and radio button.
Is there a way? If so, what should I do?

2

Hi Junyoung,

That would be possible, by creating different form containers and initializing them manually with different themes.
Also, it won’t work if the forms are inside an mbsc-page, because the page is also themed and the styles will mix up.
Example:

<div id="form1">
    <label>
        Input
        <input/>
    </label>
    <label>
        Input
        <input/>
    </label>
</div>
<div id="form2">
    <label>
        Checkbox
        <input type="checkbox"/>
    </label>
    <label>
        Checkbox
        <input type="checkbox"/>
    </label>
    <label>
        Radio
        <input name="radio" type="radio"/>
    </label>
    <label>
        Radio
        <input name="radio" type="radio"/>
    </label>
</div>
<div id="form3">
    <label>
        Switch
        <input type="checkbox" data-role="switch"/>
    </label>
    <label>
        Switch
        <input type="checkbox" data-role="switch"/>
    </label>
</div>

JS:

$('#form1').mobiscroll().form({
    theme: 'ios'
});

$('#form2').mobiscroll().form({
    theme: 'windows'
});

$('#form3').mobiscroll().form({
    theme: 'ios'
});

While this works, mixing the themes is not a recommended pattern. Could you share some details on why would you like to do that? Perhaps customizing the ios checkbox / radio styles would be the way to go.

Best,
Isti