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 name="description" content="★ Bootstrap: Android select menu fix" />
 <script src="http://code.jquery.com/jquery.min.js"></script>
 <link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
 <script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
 <meta charset=utf-8 />
 <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;
var nua = navigator.userAgent;
var is_android = ((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') &gt; -1));
if(is_android) {
        $('select.form-control').removeClass('form-control').css('width', '100%');
​
}
&lt;/script&gt;</pre>
  
  <br>
  
  <h2>See it in action</h2>
  
 <form role="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>
  <!--/.form-group-->
  
  <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>
   <!--/.col-sm-6-->
   
   <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>
    <!--/.form-group-->
    
   </div>
   <!--/.col-sm-6-->
   
  </div>
  <!--/.row-->
  
 </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>
<!--container-->
​
</body>
<script>
var nua = navigator.userAgent;
var is_android = ((nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1) && !(nua.indexOf('Chrome') > -1));
if(is_android) {
        $('select.form-control').removeClass('form-control').css('width', '100%');
​
}
</script>
</html>
Output 300px

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

Dismiss x
public
Bin info
mdopro
0viewers