Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Bootstrap: Android select menu fix">
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.css" rel="stylesheet" type="text/css">
    <title>JS Bin</title>
  </head>
  
  <body>
  
    <div class="container">
      <h2>Problem and fix</h2>
      <p>On <code>&lt;select&gt;</code> elements, the Android stock browser will not display the side controls if there is a <code>border-radius</code> and/or <code>border</code> applied. Use the snippet of code below to remove the offending CSS and render the <code>&lt;select&gt;</code> as an unstyled element on the Android stock broswer. The useragent sniffing avoids interfernece with Chrome, Safari, and Mozilla browsers.</p>
​
<pre>
&lt;script&gt;
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') &gt; -1 &amp;&amp; nua.indexOf('Android ') &gt; -1 &amp;&amp; nua.indexOf('AppleWebKit') &gt; -1 &amp;&amp; nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
&lt;/script&gt;
</pre>
​
​
​
      <h2>See it in action</h2>
      <form>
        <div class="form-group">
          <select class="form-control">
            <option>Information 1</option>
            <option>Information 2</option>
            <option>Information 3</option>
            <option>Information 4</option>
            <option>Information 5</option>
          </select>
        </div>
  
        <div class="row">
          <div class="col-sm-6">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
          </div>
   
          <div class="col-sm-6">
            <div class="form-group">
              <select class="form-control">
                <option>Information 1</option>
                <option>Information 2</option>
                <option>Information 3</option>
                <option>Information 4</option>
                <option>Information 5</option>
              </select>
            </div>
          </div>
        </div>
      </form>
​
      <hr>
      
      <h3>Before</h3>
      <img src="http://media.crossbrowsertesting.com/users/50267/snapshots/ze89ecd8a7bbfbe885fb.png" class="img-responsive">
​
      <h3>After</h3>
      <img src="http://media.crossbrowsertesting.com/users/50267/snapshots/z33c0ac1501294941ea8.png" class="img-responsive">
    </div>
​
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/latest/js/bootstrap.js"></script>
    <script>
    $(function () {
      var nua = navigator.userAgent
      var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
      if (isAndroid) {
        $('select.form-control').removeClass('form-control').css('width', '100%')
      }
    })
    </script>
  </body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
mdopro
0viewers