3. Many jQuery Mobile widgets add additional HTML structure to the document. You need to understand what HTML was added and how it is styled by the JQM CSS in order to figure out how to override it. The built-in debug and inspection tools in your desktop browser are invaluable for doing so.
4. Most/all jQuery Mobile widgets are styled as children of the page theme. That's how page themes are able to affect all of the widgets on a page. Thus, a successful override will always need to include a theme selector.
5. If you post a link to a page on your site, or make a jsFiddle or Plunkr, we can help you more easily. In fact, I helped somebody with almost exactly the same problem yesterday. This will probably help you. See the Fiddle posted in my last response.
6. Irrelevant to this problem, but your line loading icons CSS is redundant and unnecessary. The icons CSS is already included in the main CSS file. The icons CSS file is for use when you are loading icons, theme, and structure CSS files separately. You usually do this when you want to use a theme you downloaded from ThemeRoller, and/or prefer a different format default for icons.
7. The JQM CSS doesn't "override" anything. Your CSS follows it, and needs to override the JQM CSS. If your CSS fails to override, then nodes are styled by the JQM CSS.
Yes, my fiddle has the !important tag. It is left-over from the original provided with the question. I didn't examine every line of the CSS to see if it was needed or optimal. I fixed the problem that was presented.
Regardless of using jQuery or not, it is important to learn CSS selectors and cascade. You will need to know them in order to override ANY CSS framework.
Leave a comment on watusiware's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic