Fix for browsers with JavaScript but without box-shadow enabled. outline: 0; outline-width: 2px; doesn't work, requires an outline-style to be set.

Author: zachleat

css/themes/default/jquery.mobile.theme.css

@@ -1109,7 +1109,7 @@ a.ui-link-inherit {
 	box-shadow: 0px 1px 0 					rgba(255,255,255,.4);
 }
 
-/* Focus state - set here for specificity
+/* Focus state - set here for specificity (note: these classes are added by JavaScript)
 -----------------------------------------------------------------------------------------------------------*/
 
 .ui-btn:focus {
@@ -1135,5 +1135,6 @@ a.ui-link-inherit {
 /* ...and bring back focus */
 .ui-mobile-nosupport-boxshadow .ui-focus,
 .ui-mobile-nosupport-boxshadow .ui-btn:focus {
-	outline-width: 2px;
-}
+	outline-width: 1px;
+	outline-style: dotted;
+}

js/jquery.mobile.forms.slider.js

@@ -181,16 +181,21 @@ $.widget( "mobile.slider", $.mobile.widget, {
 
 		slider.insertAfter( control );
 
-		// NOTE force focus on handle
-		this.handle.bind({
-			focus: function() {
-				( cType == 'select' ? slider : $( this ) ).addClass( $.mobile.focusClass );
-			},
-
-			blur: function() {
-				( cType == 'select' ? slider : $( this ) ).removeClass( $.mobile.focusClass );
-			},
+		// Only add focus class to toggle switch, sliders get it automatically from ui-btn
+		if( cType == 'select' ) {
+			this.handle.bind({
+				focus: function() {
+					( $.support.boxShadow ? slider : $( this ) ).addClass( $.mobile.focusClass );
+				},
+
+				blur: function() {
+					( $.support.boxShadow ? slider : $( this ) ).removeClass( $.mobile.focusClass );
+				}
+			});
+		}
 
+		this.handle.bind({
+			// NOTE force focus on handle
 			vmousedown: function() {
 				$( this ).focus();
 			},