title: Jquery UI Slider and Custom Style
body: <p>I need help with my slider. I would like to style the dropdown (select box) <a href="https://jqueryui.com/slider/#hotelrooms" rel="nofollow">here</a>.</p>
  
  <p>(<a href="http://awesomescreenshot.com/0f94xotzc6" rel="nofollow">http://awesomescreenshot.com/0f94xotzc6</a>)</p>
  
  <p>I need a style for ie9, ie10, safari, chrome and firefox. But I can't find any solutions :( </p>
  
  <p>My best way was <a href="http://bavotasan.com/2011/style-select-box-using-only-css/" rel="nofollow">this one</a> but there is a problem with the "after elements" from the UI Slider. In the front end, it looks like:</p>
  
  <pre><code>&lt;select id="betrag" class="test" name="betrag"&gt;
  &lt;div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" style="margin-top:8px"&gt;
  </code></pre>
  
  <p>I can't place the div with the class "styled-select" like in the example</p>
  
  <pre><code>&lt;div class="styled-select"&gt;
     &lt;select&gt;
        &lt;option&gt;Here is the first option&lt;/option&gt;
        &lt;option&gt;The second option&lt;/option&gt;
     &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Every time it looks like this, in the front end</p>
  
  <pre><code>&lt;div class="styled-select"" style="text-align:right"&gt;
  &lt;select id="betrag" class="test" name="betrag"&gt;
  &lt;div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" style="margin-top:8px"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In FF, Chrome it looks fine but IE had a problem with this.</p>
  
  <p>How can I style the dropdown?</p>