Button: Class ui-input-btn for all input buttons instead of ui-submit. Adjusted rules for buttons in field containers.

Author: jaspermdegroot

css/structure/jquery.mobile.button.css

@@ -1,3 +1,4 @@
+/* TODO: This file only contains CSS for the button widget and should be renamed to jquery.mobile.forms.button.css */
 button.ui-btn {
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
@@ -21,7 +22,6 @@ button.ui-btn-icon-notext {
 	margin-right: 0;
 	margin-left: 0;
 }
-
 /* Hide the native input element */
 .ui-btn > input[type="button"],
 .ui-btn > input[type="submit"],
@@ -52,11 +52,39 @@ button.ui-btn-icon-notext {
 .ui-state-disabled input[type="reset"] {
 	display: none;
 }
-
-.ui-field-contain .ui-btn.ui-submit { margin: 0; }
-label.ui-submit { font-size: 16px; line-height: 1.4; font-weight: normal; margin: 0 0 .3em; display: block; }
+label.ui-input-btn {
+	font-size: 16px;
+	line-height: 1.4;
+	font-weight: normal;
+	margin: 0 0 .3em;
+	display: block;
+}
+.ui-field-contain > .ui-input-btn,
+.ui-field-contain > button.ui-btn {
+	margin: 0;
+}
 @media (min-width: 28em) {
-	.ui-field-contain label.ui-submit { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0; }
-	.ui-field-contain .ui-btn.ui-submit { width: 78%; display: inline-block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
-	.ui-hide-label .ui-btn.ui-submit { width: auto; display: block; }
+	.ui-field-contain label.ui-input-btn {
+		vertical-align: top;
+		display: inline-block;
+		width: 20%;
+		margin: 0 2% 0 0;
+	}
+	.ui-field-contain > .ui-input-btn,
+	.ui-field-contain > button.ui-btn {
+		width: 78%;
+		display: inline-block;
+		-webkit-box-sizing: border-box;
+		-moz-box-sizing: border-box;
+		-ms-box-sizing: border-box;
+		box-sizing: border-box;
+	}
+	.ui-hide-label > .ui-input-btn {
+		width: auto;
+		display: block;
+	}
+	.ui-hide-label > button.ui-btn {
+		width: 100%;
+		display: block;
+	}
 }

css/structure/jquery.mobile.core.css

@@ -232,5 +232,5 @@ div.ui-mobile-viewport { overflow-x: hidden; }
 .ui-nojs { position: absolute; left: -9999px; }
 
 /* accessible content hiding */
-.ui-hide-label label.ui-input-text, .ui-hide-label label.ui-select, .ui-hide-label label.ui-slider, .ui-hide-label label.ui-submit, .ui-hide-label .ui-controlgroup-label,
+.ui-hide-label label.ui-input-text, .ui-hide-label label.ui-select, .ui-hide-label label.ui-slider, .ui-hide-label label.ui-input-btn, .ui-hide-label .ui-controlgroup-label,
 .ui-hidden-accessible { position: absolute !important; left: -9999px; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }

js/widgets/forms/button.js

@@ -28,6 +28,8 @@ $.widget( "mobile.button", $.mobile.widget, {
 			classes = "ui-btn";
 
 		if ( isInput ) {
+			classes += " ui-input-btn";
+			
 			// TODO: When we have time to test thoroughly--any classes manually applied to the original element should be carried over to the enhanced element, with an `-enhanced` suffix. See https://github.com/jquery/jquery-mobile/issues/3577
 			/* if ( $el[0].className.length ) {
 				classes = $el[0].className;
@@ -40,11 +42,6 @@ $.widget( "mobile.button", $.mobile.widget, {
 				classes += " ui-btn-right";
 			}
 
-			if ( $el.attr( "type" ) === "submit" || $el.attr( "type" ) === "reset" ) {
-				classes += " ui-submit";
-			}
-			$( "label[for='" + $el.attr( "id" ) + "']" ).addClass( "ui-submit" );
-
 			this.button = $( "<div></div>" )
 				[ "text" ]( $el.val() )
 				.insertBefore( $el )
@@ -66,6 +63,8 @@ $.widget( "mobile.button", $.mobile.widget, {
 			this.button = $el.addClass( classes );
 		}
 
+		$( "label[for='" + $el.attr( "id" ) + "']" ).addClass( "ui-input-btn" );
+		
 		$.extend( this, {
 			isInput: isInput,
 			buttonClasses: classes,