multi select count bubble

by Shobhit Sharma

HTML

<!DOCTYPE html>
<html>
<head>
 
  <title>multi select count bubble</title>
  <meta charset=utf-8 />
  <meta name="viewport" content="width=device-width, initial-scale="1"">
  
  <link rel="stylesheet"  href="http://code.jquery.com/mobile/latest/jquery.mobile.css" /> 
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
  <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script> 
</head>
  
<body>
    
 <div data-role="page">

  <div data-role="header">
    <h1>fixed multi select title</h1>
  </div><!-- /header -->

     <div data-role="content">  
   
    <form id="signup">
        <label for="select-choice-0" class="select">Shipping method:</label>
<select name="select-choice-0" id="select-choice-0" multiple="multiple" data-native-menu="false">
   <option selected value="standard">Standard: 7 day</option>
   <option selected value="rush">Rush: 3 days</option>
   <option selected value="express">Express: next day</option>
   <option selected value="overnight">Overnight</option>
</select>

  </form>
  </div><!-- /content -->

   <div data-role="footer" data-position="fixed">
    <h4>#4233</h4>
  </div><!-- /footer -->

</div><!-- /page -->

</body>
</html>

CSS

.ui-select .ui-btn-icon-right .ui-btn-inner { padding-right: 65px !important; }