jquery-mobile css令人不安的我的按鈕定製css

Question

我使用的是PhoneGap應用程序的jquery.mobile-1.1.0。我在按鈕css中遇到問題。 jquery有它自己的按鈕樣式，但我不想使用它，並希望有我自己的按鈕css。我也使用少數jQuery組件，比如製表符，使用jQuery-mobile css的表單搜索，所以我必須將它包含在我的應用程序中。

這裏是我的html代碼：

<div data-role="content"> 
    <div class="signup"> 
    <form action="#" id="loginForm"> 
    <fieldset> 
    <ul> 
    <li class="first"> 
    <label><span>Email*</span></label> 
    <input name="loginemail" type="text" id="loginemail" class="input" placeholder="Enter Full Name" /> 
    </li> 

    <li> 
    <label><span>Password*</span></label> 
    <input name="loginpassword" id="loginpassword" type="text" class="input" placeholder="Pick A Password" /> 
    </li> 

    <li> 
    <input name="" type="submit" id="loginSubmit" class="button" value="Login" /> 
    </li> 
    </ul> 

    </fieldset> 
    </form> 
    </div> <!-- signup- div --> 
    </div><!-- - content --> 
    </div> <!-- end login page --> 

來源，而這樣做檢查元素在Firebug的jQuery創建針對該按鈕，最終擾亂了我的整個按鈕的CSS的外層。

<li><div aria-disabled="false" class="ui-btn ui-shadow ui-btn-corner-all 
    ui-fullsize ui-btn-block ui-btn-up-c" data-mini="false" data-inline="false" 
    data-theme="c" data-iconpos="" data-icon="" data-wrapperels="span" 
    data-iconshadow="true" data-shadow="true" data-corners="true"> 
    <span class="ui-btn-inner ui-btn-corner-all"> 
    <span class="ui-btn-text">Login</span> 
    </span> 
    <input aria-disabled="false" name="" id="loginSubmit" 
    class="button ui-btn-hidden" value="Login" type="submit"></div></li> 

這裏是CSS

.button{ width:100% !important; height:69px !important; 
    float:left !important; 
    font-size:24px !important; 
    font-family:"MyriadPro-BoldCond_0",Arial, Helvetica, sans-serif !important; 
    color:#FFFFFF !important; text-align:center; 
    background:#ca2c00 !important; border:none !important; 
    background:-moz-linear-gradient(#ca2c00, #7a1a00) !important; 
    background: -webkit-gradient(linear, left top, left bottom, from(#ca2c00), to(#7a1a00)) !important; 
    -pie-background: linear-gradient(#ca2c00, #7a1a00) !important; 
    background: -o-linear-gradient(#ca2c00, #7a1a00) !important; 
    -moz-border-radius:0 0 7px 7px !important; 
    -webkit-border-radius:0 0 7px 7px !important; 
    border-radius:0 0 7px 7px !important; behavior: url(PIE.htc) !important; 
    position:relative !important; 
    cursor:pointer !important;} 

請幫助我的自定義按鈕類。我怎樣才能阻止jQuery從按鈕周圍創建一個外殼，並允許它選擇我的自定義CSS。謝謝

Answer 1

在jquery mobile中，基於輸入的按鈕和按鈕元素是自動增強的，不需要數據角色。所以你有兩個選擇來解決這個問題。

1. 編輯jquery移動主題，或者更確切地說使用主題滾輪創建自定義主題。你可以找到themeroller工具here。

2. 第二個選項是將輸入按鈕的data-role設置爲none。 Ex < input type =「button」data-role =「none」id =「btnId」class =「button」>。

希望它對你有所幫助。

- MEJO

Answer 2

.button class被jQuery Mobile使用，試着用另一個類名。