diff --git a/app/styles/input.css b/app/styles/input.css index f6cdbd21..ad5345c7 100644 --- a/app/styles/input.css +++ b/app/styles/input.css @@ -5,7 +5,7 @@ * This file is licensed under the 2-Clause BSD license (see LICENSE.txt). */ -input, button, select, textarea { +input, input::file-selector-button, button, select, textarea { /* Respect standard font settings */ font: inherit; } @@ -40,6 +40,7 @@ input[type=color], input[type=image], input[type=reset], input[type=submit], +input::file-selector-button, button, select { /* Disable default rendering */ @@ -61,6 +62,7 @@ input[type=button], input[type=color], input[type=reset], input[type=submit], +input::file-selector-button, button { padding-left: 20px; padding-right: 20px; @@ -165,6 +167,14 @@ input[type=range]::-moz-range-thumb { margin-top: -7px; } +input[type=file] { + background-image: none; + border: none; +} +input::file-selector-button { + margin-right: 6px; +} + input:not([type]):focus-visible, input[type=button]:focus-visible, input[type=checkbox]:focus-visible, @@ -186,12 +196,16 @@ input[type=text]:focus-visible, input[type=time]:focus-visible, input[type=url]:focus-visible, input[type=week]:focus-visible, +input:focus-visible::file-selector-button, button:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid rgb(74, 144, 217); outline-offset: 1px; } +input[type=file]:focus-visible { + outline: none; /* We outline the button instead of the entire element */ +} input:not([type]):disabled, input[type=button]:disabled, @@ -200,6 +214,7 @@ input[type=color]:disabled, input[type=date]:disabled, input[type=datetime-local]:disabled, input[type=email]:disabled, +input[type=file]:disabled, input[type=image]:disabled, input[type=month]:disabled, input[type=number]:disabled, @@ -214,6 +229,7 @@ input[type=text]:disabled, input[type=time]:disabled, input[type=url]:disabled, input[type=week]:disabled, +input:disabled::file-selector-button, button:disabled, select:disabled, textarea:disabled { @@ -225,6 +241,7 @@ input[type=color]:active, input[type=image]:active, input[type=reset]:active, input[type=submit]:active, +input::file-selector-button:active, button:active, select:active { border-bottom-width: 1px; @@ -236,6 +253,7 @@ select:active { :root:not(.noVNC_touch) input[type=image]:hover:not(:disabled), :root:not(.noVNC_touch) input[type=reset]:hover:not(:disabled), :root:not(.noVNC_touch) input[type=submit]:hover:not(:disabled), +:root:not(.noVNC_touch) input::file-selector-button:hover:not(:disabled), :root:not(.noVNC_touch) button:hover:not(:disabled) { background-image: linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250)); }