Apply CSS style to input elements

Different browsers have wildly different defaults for input elements.
Try to get a consistent interface by applying our own style.

2 files changed, 78 insertions, 13 deletions

diff --git a/app/styles/base.css b/app/styles/base.css
index c0d7fce..81c4516 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -27,6 +27,77 @@ html {
 }
 
 /* ----------------------------------------
+ * Input Elements
+ * ----------------------------------------
+ */
+
+input[type=input], input[type=password], input:not([type]), textarea {
+  /* Disable default rendering */
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background: none;
+
+  margin: 2px;
+  padding: 2px;
+  border: 1px solid rgb(192, 192, 192);
+  border-radius: 5px;
+  color: black;
+  background: linear-gradient(to top, rgb(255, 255, 255) 80%, rgb(240, 240, 240));
+}
+
+input[type=button], select {
+  /* Disable default rendering */
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background: none;
+
+  margin: 2px;
+  padding: 2px;
+  border: 1px solid rgb(192, 192, 192);
+  border-bottom-width: 2px;
+  border-radius: 5px;
+  color: black;
+  background: linear-gradient(to top, rgb(255, 255, 255), rgb(240, 240, 240));
+
+  /* This avoids it jumping around when :active */
+  vertical-align: middle;
+}
+
+input[type=button] {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+option {
+  color: black;
+  background: white;
+}
+
+input[type=input]:focus, input[type=password]:focus,
+input:not([type]):focus, input[type=button]:focus,
+textarea:focus, select:focus {
+  box-shadow: 0px 0px 3px rgba(74, 144, 217, 0.5);
+  border-color: rgb(74, 144, 217);
+  outline: none;
+}
+
+input[type=button]::-moz-focus-inner {
+  border: none;
+}
+
+input[type=input]:disabled, input[type=password]:disabled,
+input:not([type]):disabled, input[type=button]:disabled,
+textarea:disabled, select:disabled {
+  color: rgb(128, 128, 128);
+  background: rgb(240, 240, 240);
+}
+
+input[type=button]:active, select:active {
+  border-bottom-width: 1px;
+  margin-top: 3px;
+}
+
+/* ----------------------------------------
  * Control Bar
  * ----------------------------------------
  */
@@ -114,6 +185,10 @@ html {
   transform: translate(0, 0);
 }
 
+.noVNC_submit {
+  float: right;
+}
+
 /* noVNC Touch Device only buttons */
 #noVNC_mobile_buttons {
   display: inline;
@@ -194,9 +269,6 @@ html {
 #noVNC_clipboard_text {
   width: 500px;
 }
-#noVNC_clipboard_clear_button {
-  float: right;
-}
 
 /* Settings */
 #noVNC_settings {
@@ -209,9 +281,6 @@ html {
 #noVNC_setting_path {
   width: 100px;
 }
-#noVNC_settings_apply {
-  float: right;
-}
 
 /* Connection Controls */
 #noVNC_connect_controls {
@@ -233,10 +302,6 @@ html {
 #noVNC_setting_password {
   width: 150px;
 }
-#noVNC_connect_button {
-  width: 110px;
-  float: right;
-}
 
 /* ----------------------------------------
  * Status Dialog
diff --git a/vnc.html b/vnc.html
index b5bd282..6c2b9d6 100644
--- a/vnc.html
+++ b/vnc.html
@@ -121,7 +121,7 @@
                 </textarea>
                 <br />
                 <input id="noVNC_clipboard_clear_button" type="button"
-                    value="Clear" />
+                    value="Clear" class="noVNC_submit" />
             </div>
 
             <!-- Toggle fullscreen -->
@@ -165,7 +165,7 @@
                         </select></label>
                     </li>
                     <hr>
-                    <li><input type="button" id="noVNC_settings_apply" value="Apply" /></li>
+                    <li><input type="button" id="noVNC_settings_apply" value="Apply" class="noVNC_submit" /></li>
                 </ul>
             </div>
 
@@ -182,7 +182,7 @@
                     <li><label><strong>Port: </strong><input id="noVNC_setting_port" /></label></li>
                     <li><label><strong>Password: </strong><input id="noVNC_setting_password" type="password" /></label></li>
                     <li><label><strong>Token: </strong><input id="noVNC_setting_token" /></label></li>
-                    <li><input id="noVNC_connect_button" type="button" value="Connect" /></li>
+                    <li><input id="noVNC_connect_button" type="button" value="Connect" class="noVNC_submit" /></li>
                 </ul>
             </div>
         </div>