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

css jquery-mobile
Happy picture Happy · Apr 11, 2012 · Viewed 36.5k times · Source

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

Frédéric Hamidi picture Frédéric Hamidi · Apr 11, 2012

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>

Related questions

jquery mobile background image

I am building a jQuery mobile site, and I am trying to insert a scalable image into the background, which would adjust to screen size of the phone. This is my code: <!DOCTYPE html> <html> <…

Read More
jQuery Mobile: Stick footer to bottom of page

Is there any way, bearing in mind the way the jQuery Mobile framework operates, to fix the page so that the footer always aligns with the bottom of the page - no matter the height. As it stands the height …

Read More
How to prevent document scrolling but allow scrolling inside div elements on websites for iOS and Android?

I created a website with jQueryMobile for iOS and Android. I don't want the document itself to scroll. Instead, just an area (a <div> element) should be scrollable (via css property overflow-y:scroll). So I disabled document scrolling …

Read More