JQuery Buttons - Необычный CSS стайлинга

Question

В рамках моего приложения PhoneGap У меня есть следующие кнопки формы:

<input type="button" value="Proceed" id="proceed"> 

У меня в таблице стилей следующее перезаписать оригинальный JQuery мобильный:

#proceed { 
    background-color: red; 
    opacity: 1; 
    width: 50%; 
} 

Если я не устанавливайте непрозрачность в 1, тогда цвет фона вымывается и не сильно используется. Однако, когда я устанавливаю его на 1, «текст» красного цвета появляется над текстом (отражается «значением» в html) «Продолжить», что является проблемой здесь.

Кроме того, несмотря на то, что ширина установлена ​​на 50%, кнопка, как представляется, удерживает ширину 100%, а внутренняя коробка имеет 50% ширину в красном. Я не уверен, откуда появился этот внутренний эффект окна - это должна быть функция jQuery, поскольку она не в моем коде.

Это выглядит необычно - как я могу стилизовать кнопку в целом? Или, проще говоря, как я могу получить значение кнопки над цветом фона?

Answer 1

Вот код:

#proceed { 
 
    background-color: red; 
 
    opacity: 1; 
 
    width: 50%; 
 
}

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 

 
<input type="button" value="Proceed" id="proceed">

Если вы проверяете кнопку фанка (правая кнопка мыши на нем и выберите «Проверить» или «Проверить элемент»), вы увидите, что JQuery мобильный оборачивает кнопку в дополнительном HTML:

<div class="ui-btn ui-input-btn ui-corner-all ui-shadow"> 
    Proceed 
    <input type="button" value="Proceed" id="proceed"> 
</div> 

чтобы изменить цвет, вы должны изменить свою тему с помощью data-theme:

<input type="button" value="Proceed" data-theme="a"> 

По умолчанию JQuery Mobile имеет несколько тем, построенных в: белый (data-theme="a"), черный (data-theme="b"), etc. Красный не является одним из них, поэтому я думаю, вам нужно создать тему (using their web site), а затем добавить созданные CSS-файлы темы на свою страницу.