added option for useNativeMenu. Should be updated so, when set, the custom menu markup is never created.

js/jquery.mobile.forms.select.js

@@ -18,7 +18,8 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
 		menuPageTheme: 'b',
 		overlayTheme: 'a',
 		hidePlaceholderMenuItems: true,
-		closeText: 'Close'
+		closeText: 'Close',
+		useNativeMenu: true
 	},
 	_create: function(){
 	
@@ -27,7 +28,6 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
 			o = this.options,
 			
 			select = this.element
-						.attr( "tabindex", "-1" )
 						.wrap( "<div class='ui-select'>" ),
 							
 			selectID = select.attr( "id" ),
@@ -152,26 +152,39 @@ $.widget( "mobile.selectmenu", $.mobile.widget, {
 		select
 			.change(function(){ 
 				self.refresh();
-			})
-			.focus(function(){
-				$(this).blur();
-				button.focus();
-			});
-		
-		//button events
-		button
-			.bind( $.support.touch ? "touchend" : "click" , function( event ){
-				if( $( this ).data( "moved" ) ){
-					$( this ).removeData( "moved" );
-				}
-				else{
-					self.open();
-					event.preventDefault();
-				}	
-			})
-			.bind( "touchmove", function(event){
-				$( this ).data( "moved", true );
 			});
+			
+		//support for using the native select menu with a custom button
+		if( o.useNativeMenu ){
+			
+			select
+				.appendTo(button)
+				.bind( "touchstart mousedown", function( e ){
+					//add active class to button
+					button.addClass( $.mobile.activeBtnClass );
+					
+					//ensure button isn't clicked
+					e.stopPropagation();	
+				})
+				.bind( "focus mouseover", function(){
+					button.trigger( "mouseover" );
+				})
+				.bind( "blur mouseout", function(){
+					button
+						.trigger( "mouseout" )
+						.removeClass( $.mobile.activeBtnClass );
+				});
+			
+			button.attr( "tabindex", "-1" );
+		}	
+		else {
+			select
+				.attr( "tabindex", "-1" )
+				.focus(function(){
+					$(this).blur();
+					button.focus();
+				});
+		}
 		
 		//events for list items
 		list.delegate("li:not(.ui-disabled, .ui-li-divider)", "click", function(event){

themes/default/jquery.mobile.forms.select.css

@@ -3,8 +3,10 @@
 * Copyright (c) jQuery Project
 * Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
 */
-.ui-select { display: block; }
+.ui-select { display: block; position: relative; }
 .ui-select select { position: absolute; left: -9999px; top: -9999px; }
+.ui-select a select { cursor: pointer; -webkit-appearance: button; left: 0; top:0; width: 100%; height: 100%; opacity: 0; }
+
 .ui-select .ui-btn-icon-right .ui-btn-inner { padding-right: 45px; } 
 .ui-select .ui-btn-icon-right .ui-icon { right: 15px;  }