CODEWITHSUNDEEP
cssjquery-mobile
Xstatic
Xstatic

Reputation: 1689

Override jquery mobile styling

I have a form in my html document that contains a submit button like so:

<input type="submit" value="submit"/>

No matter what I try, I am not able to override the Jquery Mobile styling.

Any suggestions?

Upvotes: 2

Views: 5349

Answers (1)

Gajotres
Gajotres

Reputation: 57309

Before you change anything in jQuery Mobile you need to understand one thing. HTML you have written will not be there when page is shown.

jQuery Mobile enhances page markup with additional HTML/CSS structures. If this button is used:

<input type="submit" value="submit"/>

its final HTML is going to look like this:

<div data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" data-disabled="false" class="ui-submit ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" aria-disabled="false">
    <span class="ui-btn-inner">
        <span class="ui-btn-text">submit</span>
    </span>
    <input type="submit" value="submit" class="ui-btn-hidden" data-disabled="false"/>
</div>

So when changing jQuery Mobile elements CSS you need to change final result, not initial HTML. CSS styles applied to original element will not be copied to a new element.

Working jsFiddle example: http://jsfiddle.net/Gajotres/6dWkV/

One last thing, when changing jQuery Mobile styles don't forget to use !important to override original styles.

Final CSS:

.ui-submit {
    position: relative !important;
    float: right !important;
    background: red !important;
    height: 300px !important;
    width: 300px !important;    
}

Upvotes: 4

Related Questions