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:
parent
24d8b311ca
commit
79fd3b1fcf
|
@ -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
|
||||
|
|
6
vnc.html
6
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>
|
||||
|
|
Loading…
Reference in New Issue