When writing CSS overrides for jQuery Mobile, you need to be aware of
the fact that it wraps some elements in a wrapper.
<input>
is one of those.
Always use your desktop-browser's inspection tools to examine
the DOM and see what the actual HTML is, then you can device a plan to
target the proper elements.
It's useful to examine the pages of the demo site. For
example, this page about <input>:
The input in that page is:
<input
type="text" name="text-1" id="text-1" value="">
But jQuery Mobile enhances it as:
<div
class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
<input
type="text" name="text-1" id="text-1" value="">
</div>
The "box that is
drawn" is that < div> that wraps the <input> . You need to target both
elements.
data-wrapperclass
gives you a way to add a
CSS class to the wrapper element (the < div> ).
If you want to change the
appearance of ALL of the inputs in your page, it is easy to do. Just
style class
ui-input-text
. However, wrappers make it
difficult to target a specific input. That's why
data-wrapperclass
exists.
----
But that's not
the way JQM form elements are usually laid-out. Inputs conform
to their container, so you just need to put your inputs in some
sort of container, then you might apply CSS to the
container. Certainly, tables aren't the only kind of
container - Most HTML elements can be a container.
The fieldcontain widget was designed for
exactly this purpose. Is there some reason you do not want to
use fieldcontain ? I do find it old-fashioned
and bloated. I like using CSS flex-box for laying-out form contents.
But tables still work, and there is a trend toward CSS table
properties (NOT HTML tables!) to do this sort of layout.
Any of these 3 approaches work by putting a container around each
input. So, they are agnostic about what is inside.
----
I believe the reason that data-wrapper-class is
going away in the future is because JQM is continuing it's move
toward simplification and eliminating "wrappers" of the
HTML, and in the future will no longer wrap <input>. I think the
alternative will be to apply some :before or :after CSS to create a
node with CSS rather than altering the HTML in the DOM directly.
By putting each input in a wrapper, and then changing the size of
the wrapper, it should work with current JQM or future versions.