How can i stop jQuery mobile to apply styles to my specific form elements

Question

Is it possible to instruct jQuery Mobile to not style my Input box and submit button. I am good with my custom CSS. jQuery mobile script is applying its own style to all my elements.

the one workaround i tried is overriding those elements in my custom css. Is there any other functions available where i can do this ? some thing like this

$.ignoreStyles("button,text"); 

Answer 1

jQuery Mobile will ignore elements whose data-role attributes are set to none. Therefore, you can simply add these attributes to your markup:

<input type="text" name="foo" data-role="none" /> <button type="button" id="bar" data-role="none">Button</button> 

Answer 2

This works for me.

$(document).bind("mobileinit", function() {   $.mobile.ignoreContentEnabled = true; });  <div data-enhance="false">     <input type="checkbox" name="chkbox1" id="chkbox1"        checked />     <label for="chkbox1">Checkbox</label>     <input type="radio" name="radiobtn1" id="radiobtn1"        checked />     <label for="radiobtn1">Radio Button</label>   </div>