Override JQuery мобильный стиль

Question

У меня есть форма в моем HTML документ, который содержит кнопку отправки, как так:

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

Независимо от того, что я стараюсь, я не могу переопределить Jquery Mobile стиль.

Любые предложения?

Answer 1

Прежде чем что-либо изменить в jQuery Mobile, вам нужно понять одно. HTML, который вы написали, не будет отображаться при показе страницы.

jQuery Mobile расширяет разметку страницы с помощью дополнительных структур HTML/CSS. Если используется эта кнопка:

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

его окончательный HTML будет выглядеть следующим образом:

<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> 

Так при смене JQuery мобильных элементов CSS вам нужно изменить конечный результат, а не первоначальный HTML. Стили CSS, применяемые к исходному элементу, не будут скопированы в новый элемент.

Рабочая jsFiddle пример: http://jsfiddle.net/Gajotres/6dWkV/

Одна последняя вещь, при смене стилей JQuery Mobile не забудьте использовать !important переопределить оригинальные стили.

Final CSS:

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