Пользовательский ввод [type = "submit" ] стиль не работает с кнопкой jquerymobile

Я хочу использовать свой собственный стиль на кнопке ввода [type = "submit" ] с помощью кнопки jquerymobiles, но она не работает. Мой html-код:

<input type="submit"  value="Button name">

Мой код css:

input[type="submit"]
{
    border:1px solid red;
    text-decoration:none;
    font-family:helvetica;
    color:red;
    background:url(../images/btn_hover.png) repeat-x;
}

Тот же стиль применяется, когда я использую следующий код html:

<a href="#" class="selected_btn" data-role="button">Button name</a>

Ответы

Ответ 1

jQuery Mobile >= 1.4

Создайте собственный класс, например. .custom-btn. Обратите внимание, что для переопределения стилей jQM без использования !important следует соблюдать иерархию CSS. .ui-btn.custom-class или .ui-input-btn.custom-class.

.ui-input-btn.custom-btn {
   border:1px solid red;
   text-decoration:none;
   font-family:helvetica;
   color:red;
   background:url(img.png) repeat-x;
}

Добавьте data-wrapper-class в input. Пользовательский класс будет добавлен в input wrapping div.

<input type="button" data-wrapper-class="custom-btn">

Демо

jQuery Mobile <= 1,3

Кнопка

input обернута DIV с классом ui-btn. Вам нужно выбрать этот div и input[type="submit"]. Использование !important имеет важное значение для переопределения стилей JQuery Mobile.

Демо

div.ui-btn, input[type="submit"] {
 border:1px solid red !important;
 text-decoration:none !important;
 font-family:helvetica !important;
 color:red !important;
 background:url(../images/btn_hover.png) repeat-x !important;
}

Ответ 2

Я предполагаю, что вы не можете заставить css работать для вашей кнопки с помощью тега привязки. Поэтому вам нужно переопределить стили css, которые перезаписываются другими элементами с помощью свойства !important.

HTML

<a href="#" class="selected_btn" data-role="button">Button name</a>

CSS

.selected_btn
{
    border:1px solid red;
    text-decoration:none;
    font-family:helvetica;
    color:red !important;            
    background:url('http://www.lessardstephens.com/layout/images/slideshow_big.png') repeat-x;
}

Вот демон