Fix input focus state

Author: KoolADE85

components/dash-core-components/src/components/css/input.css

@@ -15,6 +15,14 @@
     overflow: hidden;
 }
 
+.dash-input-container:focus-within {
+    outline: 2px solid var(--Dash-Fill-Interactive-Strong);
+}
+
+.dash-input-container input:focus {
+    outline: none;
+}
+
 .dash-input-container:has(input[type='range']) {
     background: inherit;
 }
@@ -37,6 +45,7 @@
 /* Hide native steppers for number inputs */
 .dash-input-element[type='number'] {
     -moz-appearance: textfield;
+    border-radius: 0;
 }
 
 .dash-input-element[type='number']::-webkit-outer-spin-button,
@@ -70,10 +79,11 @@
     cursor: pointer;
     font-size: 16px;
     font-weight: bold;
-    color: var(--Dash-Text-Primary);
+    color: var(--Dash -Text-Primary);
 }
 
-.dash-input-stepper:hover {
+.dash-input-stepper:hover,
+.dash-input-stepper:focus {
     background: var(--Dash-Fill-Primary-Hover);
 }
 
@@ -115,7 +125,3 @@
 input.dash-input-element:invalid {
     outline: solid red;
 }
-
-input.dash-input-element:valid {
-    outline: none black;
-}