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.
This commit is contained in:
Pierre Ossman 2016-08-30 15:23:20 +02:00
parent 24d8b311ca
commit 79fd3b1fcf
2 changed files with 78 additions and 13 deletions

View File

@ -26,6 +26,77 @@ html {
white-space: nowrap;
}
/* ----------------------------------------
* 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

View File

@ -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>