Use <button> instead of <input> for submit button on logon screen

roundcube · Apr 4, 2017 · 559254d · 559254d
1 parent b1be7fc
commit 559254d
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 8 deletions.
diff --git a/program/include/rcmail_output_html.php b/program/include/rcmail_output_html.php
@@ -1947,9 +1947,8 @@ protected function login_form($attrib)
         }
 
         if (rcube_utils::get_boolean($attrib['submit'])) {
-            $submit = new html_inputfield(array('type' => 'submit', 'id' => 'rcmloginsubmit',
-                'class' => 'button mainaction', 'value' => $this->app->gettext('login')));
-            $out .= html::p('formbuttons', $submit->show());
+            $button_attr = array('type' => 'submit', 'id' => 'rcmloginsubmit', 'class' => 'button mainaction submit');
+            $out .= html::p('formbuttons', html::tag('button', $button_attr, $this->app->gettext('login')));
         }
 
         // surround html output with a form tag

diff --git a/program/js/app.js b/program/js/app.js
@@ -585,7 +585,7 @@ function rcube_webmail()
 
         // display 'loading' message on form submit, lock submit button
         $('form').submit(function () {
-          $('input[type=submit]', this).prop('disabled', true);
+          $('[type=submit]', this).prop('disabled', true);
           ref.clear_messages();
           ref.display_message('', 'loading');
         });

diff --git a/skins/larry/styles.css b/skins/larry/styles.css
@@ -72,6 +72,7 @@ textarea {
 
 input[type="text"]:focus,
 input[type="password"]:focus,
+button:focus,
 input.button:focus,
 textarea:focus {
 	border-color: #4787b1;
@@ -108,6 +109,7 @@ label input + span {
 
 /*** buttons ***/
 
+button,
 input.button {
 	display: inline-block;
 	margin: 0 2px;
@@ -126,6 +128,7 @@ input.button {
 	outline: none;
 }
 
+.formbuttons button,
 .formbuttons input.button {
 	color: #ddd;
 	font-size: 110%;
@@ -141,6 +144,8 @@ input.button {
 	box-shadow: 0 1px 1px 0 #ccc, inset 0 1px 0 0 #888;
 }
 
+.formbuttons button:hover,
+.formbuttons button:focus,
 .formbuttons input.button:hover,
 .formbuttons input.button:focus,
 input.button.mainaction:hover,
@@ -150,6 +155,7 @@ input.button.mainaction:focus {
 	box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6), inset 0 1px 0 0 #888;
 }
 
+.formbuttons button:active,
 .formbuttons input.button:active {
 	color: #fff;
 	background: -moz-linear-gradient(top, #5c5c5c 0%, #7b7b7b 100%);
@@ -158,6 +164,7 @@ input.button.mainaction:focus {
 	background: linear-gradient(to bottom, #5c5c5c 0%, #7b7b7b 100%);
 }
 
+button.mainaction,
 input.button.mainaction {
 	color: #ededed;
 	text-shadow: 0px 1px 1px #333;
@@ -170,6 +177,7 @@ input.button.mainaction {
 	box-shadow: inset 0 1px 0 0 #777;
 }
 
+button.mainaction:active,
 input.button.mainaction:active {
 	color: #fff;
 	background: #515151;
@@ -179,12 +187,15 @@ input.button.mainaction:active {
 	background: linear-gradient(to bottom, #2a2e31 0%, #505050 100%);
 }
 
+button[disabled],
+button[disabled]:hover,
 input.button[disabled],
 input.button[disabled]:hover,
 input.button.mainaction[disabled] {
 	color: #aaa !important;
 }
 
+button.mainaction,
 input.mainaction {
 	font-weight: bold;
 }
@@ -222,6 +233,7 @@ a.button,
 	white-space: nowrap;
 }
 
+button:focus,
 a.button:focus,
 input.button:focus {
 	border-color: #4fadd5;
@@ -230,13 +242,18 @@ input.button:focus {
 }
 
 label.disabled,
+button.disabled,
 a.button.disabled {
 	color: #999;
 }
 
 a.button.disabled,
 input.button.disabled,
 input.button[disabled],
+button.disabled,
+button[disabled],
+button.disabled:hover,
+button[disabled]:hover,
 a.button.disabled:hover,
 input.button.disabled:hover,
 input.button[disabled]:hover {
@@ -266,6 +283,7 @@ input.button[disabled]:hover {
 
 a.button.pressed,
 a.button:active,
+button:active,
 input.button:active {
 	background: #e6e6e6;
 	background: -moz-linear-gradient(top, #e6e6e6 0%, #f9f9f9 100%);
@@ -1811,7 +1829,7 @@ ul.proplist li {
 	border-color: #666;
 }
 
-#login-form input.button {
+#login-form button.button {
 	color: #444;
 	text-shadow: 0px 1px 1px #fff;
 	border-color: #f9f9f9;
@@ -1823,12 +1841,12 @@ ul.proplist li {
 	box-shadow: inset 0 1px 0 0 #fff;
 }
 
-#login-form input.button:hover,
-#login-form input.button:focus {
+#login-form button.button:hover,
+#login-form button.button:focus {
 	box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9), inset 0 1px 0 0 #fff;
 }
 
-#login-form input.button:active {
+#login-form button.button:active {
 	color: #333;
 	background: -moz-linear-gradient(top, #dcdcdc 0%, #f9f9f9 100%);
 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dcdcdc), color-stop(100%,#f9f9f9));