jQuery的按鈕 - 不尋常的CSS樣式

在我的PhoneGap的應用程序，我有以下形式按鈕：jQuery的按鈕 - 不尋常的CSS樣式

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

我在我的樣式表如下覆蓋原始的jQuery移動：

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

如果我不要將不透明度設置爲1，那麼背景顏色就會被清除掉而且用處不大。然而，當我將它設置爲1時，紅色的「背景」顏色出現在文本上（由html中的「值」反映）「繼續」，這是此處的問題。

此外，儘管寬度設置爲50％，但按鈕似乎以100％的寬度保持寬度爲50％的紅色內部框。我不確定這個內部框效應來自哪裏 - 它必須是jQuery功能，因爲它不在我的代碼中。

這看起來很不尋常 - 我如何將按鈕設計爲一個整體？或者更簡單地說，我怎樣才能讓按鈕的值出現在背景顏色的頂部？

來源

2016-08-02 Wayne

添加的css似乎沒有影響提供的按鈕（html） - 請爲您的問題添加一個[mcve] – ochi

@ochi - 道歉 - 已經刪除了錯誤的html行。謝謝 – Wayne

好吧，編輯是一個改進，但仍然不是[mcve] - 在問題中，您引用標籤（不存在），然後引用內部框（不包含任何）。幫助我們，幫助你！否則，這個問題是無法回答的。 – ochi

這是你的代碼：

#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文件添加到您的頁面。

來源

2016-08-05 19:40:41 cdrini

jQuery的按鈕 - 不尋常的CSS樣式

回答

相關問題