diff --git a/.changeset/fine-gifts-film.md b/.changeset/fine-gifts-film.md
new file mode 100644
index 0000000000..72f2c2030d
--- /dev/null
+++ b/.changeset/fine-gifts-film.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": minor
+---
+
+`UnitInput`: remove `&&` in style, since it is not needed anymore and replace id use with vanilla-extract class
diff --git a/packages/ui/src/components/UnitInput/styles.css.ts b/packages/ui/src/components/UnitInput/styles.css.ts
index 9d9cad4591..5f2cfcc62e 100644
--- a/packages/ui/src/components/UnitInput/styles.css.ts
+++ b/packages/ui/src/components/UnitInput/styles.css.ts
@@ -5,6 +5,7 @@ import {
   style,
   styleVariants,
 } from '@vanilla-extract/css'
+import { selectBarBase } from '../SelectInput/components/selectBar.css'
 
 export const widthSelectInput = createVar()
 
@@ -173,21 +174,19 @@ export const unitInputSize = styleVariants({
 })
 
 export const unitInputUnitWidth = style({
-  /** TODO remove selector when selectInput uses vanilla extract */
-  selectors: {
-    '&&': {
-      width: widthSelectInput,
-    },
-  },
+  width: widthSelectInput,
 })
 
 export const unitInputUnit = style({})
 
-globalStyle(`${unitInputUnit} #unit`, {
+globalStyle(`${unitInputUnit} ${selectBarBase}`, {
   border: 'none',
   background: 'transparent',
 })
 
-globalStyle(`${unitInputUnit} #unit:focus, ${unitInputUnit} #unit:active, `, {
-  boxShadow: 'none',
-})
+globalStyle(
+  `${unitInputUnit} ${selectBarBase}:focus, ${unitInputUnit} ${selectBarBase}:active, `,
+  {
+    boxShadow: 'none',
+  },
+)