css - jquery-mobile 和全局 css 主题之间的 rails mobile view 颜色冲突

Question

我从今天早上开始搜索，但没有找到完整的工作解决方案。

我有一个具有完整响应主题的 Rails 应用程序。我还有一个为移动设备复制的表单(只有一个 View 与移动规范交互)

  <div class="field">
    <%= f.label :title %>
    <%= f.text_field :title %>
  </div>

  <div class="field">
    <label for="amount">Price :</label>
    <input type="range" id="slider-fill" name="video[amount]" value="0.25" min="0.01" max="0.5" step="0.01"/>
  </div>

  <div class="field">
    <%= f.label :public %>
    <select name="video[priv_pub]" id="flip-1" data-role="slider">
        <option value=true selected>on</option>
        <option value=false>off</option>
    </select>     
  </div>

我希望能够自定义 slider 和切换开关，这是部分完成的，在我的 View 顶部添加下面的代码(在 stackoverflow 上找到):

<style>
.ui-btn-active { color: #FFFFFF !important; background: #f69e19 !important; background-color: none !important; border-color: #975c02 !important; }
</style>

问题: slider 和切换范围保持蓝色边框。

我在桌面 View 中使用这段代码，效果很好，但我没有成功地将它改编为移动 View :

.ui-slider-range { 
    border-color: #975c02;
    background: #f69e19; 
}

理想情况下，我希望标题字段的焦点也是橙色的:)

多谢指教

Answer 1

因为这是一个老问题，我终于找到了一些工作代码:

<% content_for :css_includes do -%>
  <%= stylesheet_link_tag "jquery.mobile-1.4.5.min.css" %>
<% end -%>

<style>
.ui-btn-active { color: #FFFFFF !important; background: #ff4486 !important; background-color: none !important; }
</style>

<% content_for :javascript_includes do %>
  <%= javascript_include_tag "jquery.mobile-1.4.5.js", "jquery.mobile.utils.js" %>
<% end %>

和表格的一部分

  <div class="field">
    <label for="amount">Price to sell (0.01BTC increments):</label>
    <input name="video[amount]" id="slider-fill" value="0.25" min="0.01" max="0.5" step="0.01" type="range" data-highlight="true" >
  </div><br />

  <div class="field">
    <%= f.label :public %>
    <select name="video[priv_pub]" id="flip-1" data-role="slider">
        <option value="false">Off</option>
        <option value="true" selected>On</option>
    </select>
  </div><br />

使用上面的代码，我可以为我的两个 rails 组件选择颜色主题:滑动条和切换开关开/关