diff --git a/css/themes/default/jquery.mobile.theme.css b/css/themes/default/jquery.mobile.theme.css
index 2ebf9e2c..60cd3739 100644
--- a/css/themes/default/jquery.mobile.theme.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/js/jquery.mobile.forms.slider.js b/js/jquery.mobile.forms.slider.js
index f82276a0..6b72a9af 100644
--- a/js/jquery.mobile.forms.slider.js
+++ b/js/jquery.mobile.forms.slider.js
@@ -181,16 +181,21 @@ $.widget( "mobile.slider", $.mobile.widget, {
 
 		slider.insertAfter( control );
 
-		// NOTE force focus on handle
+		// 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({
-			focus: function() {
-				( cType == 'select' ? slider : $( this ) ).addClass( $.mobile.focusClass );
-			},
-
-			blur: function() {
-				( cType == 'select' ? slider : $( this ) ).removeClass( $.mobile.focusClass );
-			},
-
+			// NOTE force focus on handle
 			vmousedown: function() {
 				$( this ).focus();
 			},