![jQuery Mobile Tutorial](/jquery_mobile/images/jquery-mobile-mini-logo.jpg)
- jQuery Mobile Tutorial
- jQuery Mobile - Home
- jQuery Mobile - Overview
- jQuery Mobile - Setup
- jQuery Mobile - Pages
- jQuery Mobile - Icons
- jQuery Mobile - Transitions
- jQuery Mobile - Layouts
- jQuery Mobile - Widgets
- jQuery Mobile - Events
- jQuery Mobile - Forms
- jQuery Mobile - Themes
- jQuery Mobile - CSS Classes
- jQuery Mobile - Data Attributes
- jQuery Mobile Useful Resources
- jQuery Mobile - Interview Questions
- jQuery Mobile - Quick Guide
- jQuery Mobile - Useful Resources
- jQuery Mobile - Discussion
jQuery Mobile - Icon Position
Description
The position of the selectmenu icon button can be set at the left side using data-iconpos = "left" attribute to the fieldset. By default the select menu icon is set at right side.
Example
Following example demonstrates the use of icon position in the select menu in the jQuery Mobile.
<!DOCTYPE html> <html> <head> <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> </head> <body> <h2>Selectmenu Icon Position Example</h2> <form> <div class = "ui-field-contain"> <label for = "select">Select Menu</label> <select name = "select" id = "select" data-iconpos = "left"> <option value = "1">Belgaum</option> <option value = "2">Pune</option> <option value = "3">Chennai</option> <option value = "4">Bangalore</option> <option value = "5">Mumbai</option> </select> </div> </form> </body> </html>
Output
Let's carry out the following steps to see how the above code works −
Save the above html code as selectmenu_icon_position.html file in your server root folder.
Open this HTML file as http://localhost/selectmenu_icon_position.html and the following output will be displayed.
jquery_mobile_widgets.htm
Advertisements