jQuery Mobile - Icon Left Selectmenu


By default the custom select menu icon is set at right side. The position of the custom selectmenu icon button is set at the left side using data-iconpos = "left" attribute to the fieldset.


Following example demonstrates the use of icon left in selectmenu in the jQuery Mobile.

<!DOCTYPE html>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

      <h2>Selectmenu Icon Left Position Example</h2>
      <div class = "ui-field-contain">
         <label for = "select-custom">Custom Select</label>
         <select id = "select-custom" data-native-menu = "false" data-iconpos = "left">
            <option value = "mu">Mumbai</option>
            <option value = "pu">Pune</option>
            <option value = "be">Belgaum</option>
            <option value = "ch">Chennai</option>
            <option value = "ban">Bangalore</option>


Let's carry out the following steps to see how the above code works −

  • Save the above html code as selectmenu_icon_left.html file in your server root folder.

  • Open this HTML file as http://localhost/selectmenu_icon_left.html and the following output will be displayed.

Kickstart Your Career

Get certified by completing the course

Get Started