Jquery Mobile 在固定标题上禁用样式

Question

嘿，我想在下面的代码中禁用固定标题上的主题/样式：

<div id="home-header" data-role="header" data-id="mobile-header" role="banner" 
 data-position="fixed" style="background-color: #FF8040; 
 class="ui-header ui-header-fixed slidedown" 
 -webkit-box-shadow: 0px 0px 8px 2px #000000; 
 -moz-box-shadow: 0px 0px 8px 2px #000000; box-shadow: 0px 0px 8px 2px #000000;">
    <span class="ui-title" role="heading" aria-level="1">
        Temp text here
    </span>
</div><!-- /Header -->

我已经尝试过使用 data-role="none" 但这只会弄乱固定的标题（导致它只是浮动在屏幕底部）。我也曾尝试将 class= 取出，但它似乎会在页面被重新渲染后自动将其放回代码中。

有没有办法在不搞乱 JMobile 中固定标头的正常操作的情况下做到这一点？

谢谢。

更新 #1

#home-header {
        background-color: #FF8040 !important; 
        -webkit-box-shadow: 0px 0px 8px 2px #000000 !important; 
        -moz-box-shadow: 0px 0px 8px 2px #000000 !important; 
        box-shadow: 0px 0px 8px 2px #000000 !important;
}

<div id="home-header" data-role="header" data-id="mobile-header" data-position="fixed" role="banner">
    <h1 class="ui-title" role="heading" aria-level="1">
        Temp test here
    </h1>
</div><!-- /Header -->

更新 #2

.ui-bar-a {
        border: 1px solid #FFA346 !important;
        background: #FF8040 !important;
        -webkit-box-shadow: 0px 0px 8px 2px #000000 !important; 
        -moz-box-shadow: 0px 0px 8px 2px #000000 !important; 
        box-shadow: 0px 0px 8px 2px #000000 !important;
}

Answer 1

工作示例：http://jsfiddle.net/aJXXx/

jQuery Mobile 中的每个 css 更改都必须用 !important 覆盖：

#home-header {
    background: none !important;
    text-shadow:  none !important;
    color: red !important;
}