diff --git a/frontend/src/metabase/components/InputBlurChange.styled.tsx b/frontend/src/metabase/components/InputBlurChange.styled.tsx
index b23ded2c2341d0ce881271bdf9de8fe32070bb30..13a04c387116e88a432557100f64b7f1f9218c4f 100644
--- a/frontend/src/metabase/components/InputBlurChange.styled.tsx
+++ b/frontend/src/metabase/components/InputBlurChange.styled.tsx
@@ -1,16 +1,21 @@
 import styled from "@emotion/styled";
+import {
+  inputFocusOutline,
+  inputPadding,
+  inputTypography,
+  numericInputReset,
+} from "metabase/core/style/input";
 import { color } from "metabase/lib/colors";
 
 export const Input = styled.input`
-  border: 1px solid ${color("border")};
+  ${inputPadding};
+  ${inputTypography};
+  border: 1px solid ${() => color("border")};
+  border-radius: 0.5rem;
+  color: ${() => color("text-dark")};
+  transition: border 0.3s;
 
-  &::-webkit-outer-spin-button,
-  &::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
+  ${inputFocusOutline};
 
-  &[type="number"] {
-    -moz-appearance: textfield;
-  }
+  ${numericInputReset};
 `;
diff --git a/frontend/src/metabase/core/components/SelectButton/SelectButton.styled.tsx b/frontend/src/metabase/core/components/SelectButton/SelectButton.styled.tsx
index 2410391b6dfce201854517892d75315a0c8452c5..03c23d8ab608797284959671b2618be39d1e7aae 100644
--- a/frontend/src/metabase/core/components/SelectButton/SelectButton.styled.tsx
+++ b/frontend/src/metabase/core/components/SelectButton/SelectButton.styled.tsx
@@ -2,6 +2,7 @@ import styled from "@emotion/styled";
 import { color } from "metabase/lib/colors";
 import Icon from "metabase/components/Icon";
 import { space } from "metabase/styled-components/theme";
+import { inputPadding } from "metabase/core/style/input";
 interface SelectButtonRootProps {
   hasValue: boolean;
   fullWidth: boolean;
@@ -17,11 +18,11 @@ const getColor = ({ hasValue, highlighted }: SelectButtonRootProps) => {
 };
 
 export const SelectButtonRoot = styled.button<SelectButtonRootProps>`
+  ${inputPadding}
   cursor: pointer;
   display: flex;
   width: ${props => (props.fullWidth ? "100%" : "unset")};
   align-items: center;
-  padding: 0.6em;
   border: 1px solid
     ${({ hasValue, highlighted }) =>
       hasValue && highlighted ? color("brand") : color("border")};
diff --git a/frontend/src/metabase/core/style/input.ts b/frontend/src/metabase/core/style/input.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4b26cca174e57c4e7ac978d91dcb6bce069478f0
--- /dev/null
+++ b/frontend/src/metabase/core/style/input.ts
@@ -0,0 +1,34 @@
+import { css } from "@emotion/react";
+import { color } from "metabase/lib/colors";
+
+export const inputPadding = css`
+  padding: 0.625rem 0.75rem;
+`;
+
+export const inputTypography = css`
+  font-size: 0.875rem;
+  font-weight: 700;
+`;
+
+export const inputFocusOutline = () => css`
+  &:focus {
+    border-color: ${color("brand")};
+    outline: 2px solid ${color("focus")};
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: none;
+  }
+`;
+
+export const numericInputReset = () => css`
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  &[type="number"] {
+    -moz-appearance: textfield;
+  }
+`;
diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingInput.styled.tsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingInput.styled.tsx
index 68ab08d3ee7b39aa7dd4c67eee528adb443112ea..4f700b5a45ee80c6905ce74e2b7b00b85ea11ba5 100644
--- a/frontend/src/metabase/visualizations/components/settings/ChartSettingInput.styled.tsx
+++ b/frontend/src/metabase/visualizations/components/settings/ChartSettingInput.styled.tsx
@@ -1,21 +1,7 @@
 import styled from "@emotion/styled";
-import { css } from "@emotion/react";
 import InputBlurChange from "metabase/components/InputBlurChange";
 
-import { color } from "metabase/lib/colors";
-
-export const ChartSettingInputStyle = css`
-  font-size: 0.875rem;
-  border: 1px solid ${color("border")};
-  border-radius: 0.5rem;
-  color: ${color("text-dark")};
-  padding: 0.625rem 0.75rem;
+export const ChartSettingInputBlurChange = styled(InputBlurChange)`
   display: block;
   width: 100%;
-  transition: border 0.3s;
-  font-weight: 700;
-`;
-
-export const ChartSettingInputBlurChange = styled(InputBlurChange)`
-  ${ChartSettingInputStyle}
 `;
diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingInputNumeric.styled.tsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingInputNumeric.styled.tsx
index 529408608d2b28a3176b283a0dd8b9a1eb95ccf4..4bb880d82a0384a17a0af17ccfb14c4cc6b95f1e 100644
--- a/frontend/src/metabase/visualizations/components/settings/ChartSettingInputNumeric.styled.tsx
+++ b/frontend/src/metabase/visualizations/components/settings/ChartSettingInputNumeric.styled.tsx
@@ -1,12 +1,20 @@
 import styled from "@emotion/styled";
 import Input from "metabase/core/components/Input";
+import {
+  inputFocusOutline,
+  inputPadding,
+  inputTypography,
+  numericInputReset,
+} from "metabase/core/style/input";
 
 export const ChartSettingNumericInput = styled(Input)`
   display: block;
 
   ${Input.Field} {
     width: 100%;
-    padding: 0.625rem 0.75rem;
-    font-size: 0.875rem;
+    ${inputPadding};
+    ${inputTypography};
+    ${inputFocusOutline};
+    ${numericInputReset};
   }
 `;