在JQuery Mobile中使用自定义主题滚轮后出现UI问题

我已将默认主题更改为自定义主题。使用自定义css文件后，文本框和按钮将显示两次。而且头的大小也很小。代码有什么问题？以下是屏幕截图

我的代码如下：

<div data-role="page" id="smsPage">
 <div  data-role="header">
            <h4>
               Login Page
            </h4>

 </div>
         <div data-role="content">
            <div data-role="fieldcontain">
              Username: <input name="" id="username" value=""  type="text" data-mini="true"><br>
              Password: <input name="" id="password" value=""  type="password" data-mini="true">
                <br>
               <input id="btnDefaultSMS" type="submit" value="Sign in" data-mini="false">
            </div>
         </div>        
</div>

 </div>

CSS:

---

我做错什么了吗？请提供任何建议。

您能提供仅与问题相关的css吗？如果themes/SampleApplication.min.css1是您自己的css页面，则html头部的文件路径没有帮助。您希望我包含themes/SampleApplication.min.css1吗？如果您希望包含与问题相关的css，它会有所帮助，或者是我们可以检查的网站示例。问题很可能是css样式相互冲突

<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<link rel="stylesheet" href="themes/SampleApplication.min.css"/>
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile.structure-1.4.2.min.css" />
<script type="text/javascript" src="static/jquery.js"></script>
<script type="text/javascript" src="static/jquery.mobile-1.4.2.js"></script>
<script type="text/javascript" src="static/mobileapp.js"></script>