diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 0abb1b79050eba..211a4f66f48035 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -22,6 +22,7 @@
 -   `UnitControl`: Fix an issue where keyboard shortcuts unintentionally shift focus on Windows OS. ([#62988](https://github.com/WordPress/gutenberg/pull/62988))
 -   Fix inaccessibly disabled `Button`s ([#62306](https://github.com/WordPress/gutenberg/pull/62306)).
 -   `TimePicker`: Fix time zone overflow ([#63209](https://github.com/WordPress/gutenberg/pull/63209)).
+-   `SelectControl`: Fix disabled styles ([#63266](https://github.com/WordPress/gutenberg/pull/63266)).
 -   `Tabs`: Fix text-align when text wraps in vertical mode ([#63272](https://github.com/WordPress/gutenberg/pull/63272)).
 
 ### Internal
diff --git a/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap b/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap
index 608cadbcf544f2..1d3cd12a2aa316 100644
--- a/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap
+++ b/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap
@@ -21,7 +21,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   margin-bottom: inherit;
 }
 
-.emotion-5 {
+.emotion-6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -41,20 +41,22 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   position: relative;
   border-radius: 2px;
   padding-top: 0;
+  color: var(--wp-components-color-foreground, #1e1e1e);
+  cursor: pointer;
 }
 
-.emotion-5>* {
+.emotion-6>* {
   min-height: 0;
 }
 
-.emotion-5:focus-within:not( :has( :is( .em5sgkm7, .emotion-18 ):focus-within ) ) .emotion-25 {
+.emotion-6:focus-within:not( :has( :is( .em5sgkm7, .emotion-19 ):focus-within ) ) .emotion-26 {
   border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: block;
   max-height: 100%;
   max-width: 100%;
@@ -64,7 +66,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   max-width: calc( 100% - 10px );
 }
 
-.emotion-11 {
+.emotion-12 {
   color: #1e1e1e;
   line-height: 1.4;
   margin: 0;
@@ -74,7 +76,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   font-weight: normal;
 }
 
-.emotion-11.emotion-11.emotion-11 {
+.emotion-12.emotion-12.emotion-12 {
   font-size: 11px;
   font-weight: 500;
   line-height: 1.4;
@@ -90,7 +92,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   white-space: nowrap;
 }
 
-.emotion-13 {
+.emotion-14 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -109,7 +111,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   width: 100%;
 }
 
-.emotion-15.emotion-15.emotion-15 {
+.emotion-16.emotion-16.emotion-16 {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -118,13 +120,12 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   box-sizing: border-box;
   border: none;
   box-shadow: none!important;
-  color: #1e1e1e;
+  cursor: inherit;
   display: block;
   font-family: inherit;
   margin: 0;
   width: 100%;
   max-width: none;
-  cursor: pointer;
   white-space: nowrap;
   text-overflow: ellipsis;
   font-size: 16px;
@@ -138,12 +139,12 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
 }
 
 @media ( min-width: 600px ) {
-  .emotion-15.emotion-15.emotion-15 {
+  .emotion-16.emotion-16.emotion-16 {
     font-size: 13px;
   }
 }
 
-.emotion-17 {
+.emotion-18 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -158,7 +159,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   display: flex;
 }
 
-.emotion-20 {
+.emotion-21 {
   margin-bottom: 0;
   padding-right: calc(4px * 2);
   position: absolute;
@@ -166,13 +167,17 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   right: 0;
 }
 
-.emotion-22 {
+.emotion-23 {
   -webkit-margin-end: calc(4px * -1);
   margin-inline-end: calc(4px * -1);
   line-height: 0;
 }
 
-.emotion-24.emotion-24.emotion-24 {
+.emotion-23 path {
+  fill: currentColor;
+}
+
+.emotion-25.emotion-25.emotion-25 {
   box-sizing: border-box;
   border-color: var(--wp-components-color-gray-600, #949494);
   border-radius: inherit;
@@ -197,17 +202,17 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
       class="components-base-control__field emotion-2 emotion-3"
     >
       <div
-        class="components-flex components-input-base components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6"
+        class="components-flex components-input-base components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6 emotion-7"
         data-wp-c16t="true"
         data-wp-component="InputBase"
       >
         <div
-          class="components-flex-item emotion-7 emotion-8 emotion-6"
+          class="components-flex-item emotion-8 emotion-9 emotion-7"
           data-wp-c16t="true"
           data-wp-component="FlexItem"
         >
           <label
-            class="components-truncate components-text components-input-control__label emotion-10 emotion-11 emotion-6"
+            class="components-truncate components-text components-input-control__label emotion-11 emotion-12 emotion-7"
             data-wp-c16t="true"
             data-wp-component="Text"
             for="inspector-select-control-3"
@@ -216,10 +221,10 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
           </label>
         </div>
         <div
-          class="components-input-control__container emotion-13 emotion-14"
+          class="components-input-control__container emotion-14 emotion-15"
         >
           <select
-            class="components-select-control__input emotion-15 emotion-16"
+            class="components-select-control__input emotion-16 emotion-17"
             id="inspector-select-control-3"
           >
             <option
@@ -244,15 +249,15 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
             </option>
           </select>
           <span
-            class="components-input-control__suffix emotion-17 emotion-18"
+            class="components-input-control__suffix emotion-18 emotion-19"
           >
             <div
-              class="components-spacer components-input-control-suffix-wrapper emotion-19 emotion-20 emotion-6"
+              class="components-spacer components-input-control-suffix-wrapper emotion-20 emotion-21 emotion-7"
               data-wp-c16t="true"
               data-wp-component="InputControlSuffixWrapper"
             >
               <div
-                class="emotion-22 emotion-23"
+                class="emotion-23 emotion-24"
               >
                 <svg
                   aria-hidden="true"
@@ -271,7 +276,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
           </span>
           <div
             aria-hidden="true"
-            class="components-input-control__backdrop emotion-24 emotion-25"
+            class="components-input-control__backdrop emotion-25 emotion-26"
           />
         </div>
       </div>
@@ -301,7 +306,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   margin-bottom: inherit;
 }
 
-.emotion-5 {
+.emotion-6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -321,20 +326,22 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   position: relative;
   border-radius: 2px;
   padding-top: 0;
+  color: var(--wp-components-color-foreground, #1e1e1e);
+  cursor: pointer;
 }
 
-.emotion-5>* {
+.emotion-6>* {
   min-height: 0;
 }
 
-.emotion-5:focus-within:not( :has( :is( .em5sgkm7, .emotion-18 ):focus-within ) ) .emotion-25 {
+.emotion-6:focus-within:not( :has( :is( .em5sgkm7, .emotion-19 ):focus-within ) ) .emotion-26 {
   border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: block;
   max-height: 100%;
   max-width: 100%;
@@ -344,7 +351,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   max-width: calc( 100% - 10px );
 }
 
-.emotion-11 {
+.emotion-12 {
   color: #1e1e1e;
   line-height: 1.4;
   margin: 0;
@@ -354,7 +361,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   font-weight: normal;
 }
 
-.emotion-11.emotion-11.emotion-11 {
+.emotion-12.emotion-12.emotion-12 {
   font-size: 11px;
   font-weight: 500;
   line-height: 1.4;
@@ -370,7 +377,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   white-space: nowrap;
 }
 
-.emotion-13 {
+.emotion-14 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -389,7 +396,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   width: 100%;
 }
 
-.emotion-15.emotion-15.emotion-15 {
+.emotion-16.emotion-16.emotion-16 {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -398,13 +405,12 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   box-sizing: border-box;
   border: none;
   box-shadow: none!important;
-  color: #1e1e1e;
+  cursor: inherit;
   display: block;
   font-family: inherit;
   margin: 0;
   width: 100%;
   max-width: none;
-  cursor: pointer;
   white-space: nowrap;
   text-overflow: ellipsis;
   font-size: 16px;
@@ -418,12 +424,12 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
 }
 
 @media ( min-width: 600px ) {
-  .emotion-15.emotion-15.emotion-15 {
+  .emotion-16.emotion-16.emotion-16 {
     font-size: 13px;
   }
 }
 
-.emotion-17 {
+.emotion-18 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -438,7 +444,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   display: flex;
 }
 
-.emotion-20 {
+.emotion-21 {
   margin-bottom: 0;
   padding-right: calc(4px * 2);
   position: absolute;
@@ -446,13 +452,17 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   right: 0;
 }
 
-.emotion-22 {
+.emotion-23 {
   -webkit-margin-end: calc(4px * -1);
   margin-inline-end: calc(4px * -1);
   line-height: 0;
 }
 
-.emotion-24.emotion-24.emotion-24 {
+.emotion-23 path {
+  fill: currentColor;
+}
+
+.emotion-25.emotion-25.emotion-25 {
   box-sizing: border-box;
   border-color: var(--wp-components-color-gray-600, #949494);
   border-radius: inherit;
@@ -477,17 +487,17 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
       class="components-base-control__field emotion-2 emotion-3"
     >
       <div
-        class="components-flex components-input-base components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6"
+        class="components-flex components-input-base components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6 emotion-7"
         data-wp-c16t="true"
         data-wp-component="InputBase"
       >
         <div
-          class="components-flex-item emotion-7 emotion-8 emotion-6"
+          class="components-flex-item emotion-8 emotion-9 emotion-7"
           data-wp-c16t="true"
           data-wp-component="FlexItem"
         >
           <label
-            class="components-truncate components-text components-input-control__label emotion-10 emotion-11 emotion-6"
+            class="components-truncate components-text components-input-control__label emotion-11 emotion-12 emotion-7"
             data-wp-c16t="true"
             data-wp-component="Text"
             for="inspector-select-control-0"
@@ -496,10 +506,10 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
           </label>
         </div>
         <div
-          class="components-input-control__container emotion-13 emotion-14"
+          class="components-input-control__container emotion-14 emotion-15"
         >
           <select
-            class="components-select-control__input emotion-15 emotion-16"
+            class="components-select-control__input emotion-16 emotion-17"
             id="inspector-select-control-0"
           >
             <option
@@ -534,15 +544,15 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
             </option>
           </select>
           <span
-            class="components-input-control__suffix emotion-17 emotion-18"
+            class="components-input-control__suffix emotion-18 emotion-19"
           >
             <div
-              class="components-spacer components-input-control-suffix-wrapper emotion-19 emotion-20 emotion-6"
+              class="components-spacer components-input-control-suffix-wrapper emotion-20 emotion-21 emotion-7"
               data-wp-c16t="true"
               data-wp-component="InputControlSuffixWrapper"
             >
               <div
-                class="emotion-22 emotion-23"
+                class="emotion-23 emotion-24"
               >
                 <svg
                   aria-hidden="true"
@@ -561,7 +571,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
           </span>
           <div
             aria-hidden="true"
-            class="components-input-control__backdrop emotion-24 emotion-25"
+            class="components-input-control__backdrop emotion-25 emotion-26"
           />
         </div>
       </div>
@@ -591,7 +601,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   margin-bottom: inherit;
 }
 
-.emotion-5 {
+.emotion-6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -611,20 +621,22 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   position: relative;
   border-radius: 2px;
   padding-top: 0;
+  color: var(--wp-components-color-foreground, #1e1e1e);
+  cursor: pointer;
 }
 
-.emotion-5>* {
+.emotion-6>* {
   min-height: 0;
 }
 
-.emotion-5:focus-within:not( :has( :is( .em5sgkm7, .emotion-18 ):focus-within ) ) .emotion-25 {
+.emotion-6:focus-within:not( :has( :is( .em5sgkm7, .emotion-19 ):focus-within ) ) .emotion-26 {
   border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: block;
   max-height: 100%;
   max-width: 100%;
@@ -634,7 +646,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   max-width: calc( 100% - 10px );
 }
 
-.emotion-11 {
+.emotion-12 {
   color: #1e1e1e;
   line-height: 1.4;
   margin: 0;
@@ -644,7 +656,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   font-weight: normal;
 }
 
-.emotion-11.emotion-11.emotion-11 {
+.emotion-12.emotion-12.emotion-12 {
   font-size: 11px;
   font-weight: 500;
   line-height: 1.4;
@@ -660,7 +672,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   white-space: nowrap;
 }
 
-.emotion-13 {
+.emotion-14 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -679,7 +691,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   width: 100%;
 }
 
-.emotion-15.emotion-15.emotion-15 {
+.emotion-16.emotion-16.emotion-16 {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -688,13 +700,12 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   box-sizing: border-box;
   border: none;
   box-shadow: none!important;
-  color: #1e1e1e;
+  cursor: inherit;
   display: block;
   font-family: inherit;
   margin: 0;
   width: 100%;
   max-width: none;
-  cursor: pointer;
   white-space: nowrap;
   text-overflow: ellipsis;
   font-size: 16px;
@@ -708,12 +719,12 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
 }
 
 @media ( min-width: 600px ) {
-  .emotion-15.emotion-15.emotion-15 {
+  .emotion-16.emotion-16.emotion-16 {
     font-size: 13px;
   }
 }
 
-.emotion-17 {
+.emotion-18 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -728,7 +739,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   display: flex;
 }
 
-.emotion-20 {
+.emotion-21 {
   margin-bottom: 0;
   padding-right: calc(4px * 2);
   position: absolute;
@@ -736,13 +747,17 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   right: 0;
 }
 
-.emotion-22 {
+.emotion-23 {
   -webkit-margin-end: calc(4px * -1);
   margin-inline-end: calc(4px * -1);
   line-height: 0;
 }
 
-.emotion-24.emotion-24.emotion-24 {
+.emotion-23 path {
+  fill: currentColor;
+}
+
+.emotion-25.emotion-25.emotion-25 {
   box-sizing: border-box;
   border-color: var(--wp-components-color-gray-600, #949494);
   border-radius: inherit;
@@ -767,17 +782,17 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
       class="components-base-control__field emotion-2 emotion-3"
     >
       <div
-        class="components-flex components-input-base components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6"
+        class="components-flex components-input-base components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6 emotion-7"
         data-wp-c16t="true"
         data-wp-component="InputBase"
       >
         <div
-          class="components-flex-item emotion-7 emotion-8 emotion-6"
+          class="components-flex-item emotion-8 emotion-9 emotion-7"
           data-wp-c16t="true"
           data-wp-component="FlexItem"
         >
           <label
-            class="components-truncate components-text components-input-control__label emotion-10 emotion-11 emotion-6"
+            class="components-truncate components-text components-input-control__label emotion-11 emotion-12 emotion-7"
             data-wp-c16t="true"
             data-wp-component="Text"
             for="inspector-select-control-2"
@@ -798,10 +813,10 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
           </label>
         </div>
         <div
-          class="components-input-control__container emotion-13 emotion-14"
+          class="components-input-control__container emotion-14 emotion-15"
         >
           <select
-            class="components-select-control__input emotion-15 emotion-16"
+            class="components-select-control__input emotion-16 emotion-17"
             id="inspector-select-control-2"
           >
             <option
@@ -836,15 +851,15 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
             </option>
           </select>
           <span
-            class="components-input-control__suffix emotion-17 emotion-18"
+            class="components-input-control__suffix emotion-18 emotion-19"
           >
             <div
-              class="components-spacer components-input-control-suffix-wrapper emotion-19 emotion-20 emotion-6"
+              class="components-spacer components-input-control-suffix-wrapper emotion-20 emotion-21 emotion-7"
               data-wp-c16t="true"
               data-wp-component="InputControlSuffixWrapper"
             >
               <div
-                class="emotion-22 emotion-23"
+                class="emotion-23 emotion-24"
               >
                 <svg
                   aria-hidden="true"
@@ -863,7 +878,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
           </span>
           <div
             aria-hidden="true"
-            class="components-input-control__backdrop emotion-24 emotion-25"
+            class="components-input-control__backdrop emotion-25 emotion-26"
           />
         </div>
       </div>
@@ -893,7 +908,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   margin-bottom: inherit;
 }
 
-.emotion-5 {
+.emotion-6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -913,20 +928,22 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   position: relative;
   border-radius: 2px;
   padding-top: 0;
+  color: var(--wp-components-color-foreground, #1e1e1e);
+  cursor: pointer;
 }
 
-.emotion-5>* {
+.emotion-6>* {
   min-height: 0;
 }
 
-.emotion-5:focus-within:not( :has( :is( .em5sgkm7, .emotion-18 ):focus-within ) ) .emotion-25 {
+.emotion-6:focus-within:not( :has( :is( .em5sgkm7, .emotion-19 ):focus-within ) ) .emotion-26 {
   border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: block;
   max-height: 100%;
   max-width: 100%;
@@ -936,7 +953,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   max-width: calc( 100% - 10px );
 }
 
-.emotion-11 {
+.emotion-12 {
   color: #1e1e1e;
   line-height: 1.4;
   margin: 0;
@@ -946,7 +963,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   font-weight: normal;
 }
 
-.emotion-11.emotion-11.emotion-11 {
+.emotion-12.emotion-12.emotion-12 {
   font-size: 11px;
   font-weight: 500;
   line-height: 1.4;
@@ -962,7 +979,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   white-space: nowrap;
 }
 
-.emotion-13 {
+.emotion-14 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -981,7 +998,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   width: 100%;
 }
 
-.emotion-15.emotion-15.emotion-15 {
+.emotion-16.emotion-16.emotion-16 {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -990,13 +1007,12 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   box-sizing: border-box;
   border: none;
   box-shadow: none!important;
-  color: #1e1e1e;
+  cursor: inherit;
   display: block;
   font-family: inherit;
   margin: 0;
   width: 100%;
   max-width: none;
-  cursor: pointer;
   white-space: nowrap;
   text-overflow: ellipsis;
   font-size: 16px;
@@ -1010,12 +1026,12 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
 }
 
 @media ( min-width: 600px ) {
-  .emotion-15.emotion-15.emotion-15 {
+  .emotion-16.emotion-16.emotion-16 {
     font-size: 13px;
   }
 }
 
-.emotion-17 {
+.emotion-18 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1030,7 +1046,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   display: flex;
 }
 
-.emotion-20 {
+.emotion-21 {
   margin-bottom: 0;
   padding-right: calc(4px * 2);
   position: absolute;
@@ -1038,13 +1054,17 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   right: 0;
 }
 
-.emotion-22 {
+.emotion-23 {
   -webkit-margin-end: calc(4px * -1);
   margin-inline-end: calc(4px * -1);
   line-height: 0;
 }
 
-.emotion-24.emotion-24.emotion-24 {
+.emotion-23 path {
+  fill: currentColor;
+}
+
+.emotion-25.emotion-25.emotion-25 {
   box-sizing: border-box;
   border-color: var(--wp-components-color-gray-600, #949494);
   border-radius: inherit;
@@ -1069,17 +1089,17 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
       class="components-base-control__field emotion-2 emotion-3"
     >
       <div
-        class="components-flex components-input-base components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6"
+        class="components-flex components-input-base components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6 emotion-7"
         data-wp-c16t="true"
         data-wp-component="InputBase"
       >
         <div
-          class="components-flex-item emotion-7 emotion-8 emotion-6"
+          class="components-flex-item emotion-8 emotion-9 emotion-7"
           data-wp-c16t="true"
           data-wp-component="FlexItem"
         >
           <label
-            class="components-truncate components-text components-input-control__label emotion-10 emotion-11 emotion-6"
+            class="components-truncate components-text components-input-control__label emotion-11 emotion-12 emotion-7"
             data-wp-c16t="true"
             data-wp-component="Text"
             for="inspector-select-control-1"
@@ -1100,10 +1120,10 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
           </label>
         </div>
         <div
-          class="components-input-control__container emotion-13 emotion-14"
+          class="components-input-control__container emotion-14 emotion-15"
         >
           <select
-            class="components-select-control__input emotion-15 emotion-16"
+            class="components-select-control__input emotion-16 emotion-17"
             id="inspector-select-control-1"
           >
             <option
@@ -1138,15 +1158,15 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
             </option>
           </select>
           <span
-            class="components-input-control__suffix emotion-17 emotion-18"
+            class="components-input-control__suffix emotion-18 emotion-19"
           >
             <div
-              class="components-spacer components-input-control-suffix-wrapper emotion-19 emotion-20 emotion-6"
+              class="components-spacer components-input-control-suffix-wrapper emotion-20 emotion-21 emotion-7"
               data-wp-c16t="true"
               data-wp-component="InputControlSuffixWrapper"
             >
               <div
-                class="emotion-22 emotion-23"
+                class="emotion-23 emotion-24"
               >
                 <svg
                   aria-hidden="true"
@@ -1165,7 +1185,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
           </span>
           <div
             aria-hidden="true"
-            class="components-input-control__backdrop emotion-24 emotion-25"
+            class="components-input-control__backdrop emotion-25 emotion-26"
           />
         </div>
       </div>
diff --git a/packages/components/src/select-control/index.tsx b/packages/components/src/select-control/index.tsx
index cbf0720c5544ca..5acde6ba4c7600 100644
--- a/packages/components/src/select-control/index.tsx
+++ b/packages/components/src/select-control/index.tsx
@@ -13,8 +13,7 @@ import { forwardRef } from '@wordpress/element';
  * Internal dependencies
  */
 import BaseControl from '../base-control';
-import InputBase from '../input-control/input-base';
-import { Select } from './styles/select-control-styles';
+import { Select, StyledInputBase } from './styles/select-control-styles';
 import type { WordPressComponentProps } from '../context';
 import type { SelectControlProps } from './types';
 import SelectControlChevronDown from './chevron-down';
@@ -82,7 +81,7 @@ function UnforwardedSelectControl(
 			id={ id }
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 		>
-			<InputBase
+			<StyledInputBase
 				className={ classes }
 				disabled={ disabled }
 				hideLabelFromVision={ hideLabelFromVision }
@@ -127,7 +126,7 @@ function UnforwardedSelectControl(
 							);
 						} ) }
 				</Select>
-			</InputBase>
+			</StyledInputBase>
 		</BaseControl>
 	);
 }
diff --git a/packages/components/src/select-control/styles/select-control-styles.ts b/packages/components/src/select-control/styles/select-control-styles.ts
index cc8dc2cf330b3b..b597a52f797c11 100644
--- a/packages/components/src/select-control/styles/select-control-styles.ts
+++ b/packages/components/src/select-control/styles/select-control-styles.ts
@@ -12,6 +12,7 @@ import { space } from '../../utils/space';
 import type { SelectControlProps } from '../types';
 import InputControlSuffixWrapper from '../../input-control/input-suffix-wrapper';
 import { fontSizeStyles } from '../../input-control/styles/input-control-styles';
+import InputBase from '../../input-control/input-base';
 
 interface SelectProps
 	extends Pick<
@@ -28,11 +29,19 @@ const disabledStyles = ( { disabled }: SelectProps ) => {
 		return '';
 	}
 
-	return css( {
-		color: COLORS.ui.textDisabled,
-	} );
+	return css`
+		color: ${ COLORS.ui.textDisabled };
+		cursor: default;
+	`;
 };
 
+export const StyledInputBase = styled( InputBase )`
+	color: ${ COLORS.theme.foreground };
+	cursor: pointer;
+
+	${ disabledStyles }
+`;
+
 const sizeStyles = ( {
 	__next40pxDefaultSize,
 	multiple,
@@ -128,17 +137,15 @@ export const Select = styled.select< SelectProps >`
 		box-sizing: border-box;
 		border: none;
 		box-shadow: none !important;
-		color: ${ COLORS.gray[ 900 ] };
+		cursor: inherit;
 		display: block;
 		font-family: inherit;
 		margin: 0;
 		width: 100%;
 		max-width: none;
-		cursor: pointer;
 		white-space: nowrap;
 		text-overflow: ellipsis;
 
-		${ disabledStyles };
 		${ fontSizeStyles };
 		${ sizeStyles };
 		${ sizePaddings };
@@ -149,6 +156,10 @@ export const Select = styled.select< SelectProps >`
 export const DownArrowWrapper = styled.div`
 	margin-inline-end: ${ space( -1 ) }; // optically adjust the icon
 	line-height: 0;
+
+	path {
+		fill: currentColor;
+	}
 `;
 
 export const InputControlSuffixWrapperWithClickThrough = styled(