diff --git a/packages/gestalt/src/SelectList.css b/packages/gestalt/src/SelectList.css
index ee482dd5b4..fb98cb9799 100644
--- a/packages/gestalt/src/SelectList.css
+++ b/packages/gestalt/src/SelectList.css
@@ -8,6 +8,18 @@
   padding: 0 35px 0 16px; /* right padding prevents it from running into arrow */
 }
 
+.placeholder {
+  color: var(--color-text-formfield-placeholder);
+}
+
+.selected {
+  color: var(--color-text-formfield-default);
+}
+
+.enabled {
+  background-color: var(--color-transparent);
+}
+
 .select::-ms-expand {
   display: none;
 }
diff --git a/packages/gestalt/src/SelectList.tsx b/packages/gestalt/src/SelectList.tsx
index 88cc503480..dab14b4ccd 100644
--- a/packages/gestalt/src/SelectList.tsx
+++ b/packages/gestalt/src/SelectList.tsx
@@ -133,10 +133,12 @@ function SelectList({
     formElement.base,
     size === 'md' ? layout.medium : layout.large,
     {
+      [styles.placeholder]: !disabled && placeholder && !value,
+      [styles.selected]: (!disabled && placeholder && value) || (!disabled && !placeholder),
+      [styles.enabled]: !disabled,
       [formElement.md]: size === 'md',
       [formElement.lg]: size === 'lg',
       [formElement.normal]: !errorMessage,
-      [formElement.enabledTransparent]: !disabled,
       [formElement.disabled]: disabled,
       [formElement.errored]: !disabled && !!errorMessage,
     },
diff --git a/packages/gestalt/src/SelectList/VRSelectList.css b/packages/gestalt/src/SelectList/VRSelectList.css
index 18bf04be6a..65ce6e9247 100644
--- a/packages/gestalt/src/SelectList/VRSelectList.css
+++ b/packages/gestalt/src/SelectList/VRSelectList.css
@@ -9,6 +9,10 @@
   width: 100%;
 }
 
+.placeholderText {
+  color: var(--sema-color-text-subtle);
+}
+
 .enabledText {
   color: var(--sema-color-text-default);
 }
diff --git a/packages/gestalt/src/SelectList/VRSelectList.tsx b/packages/gestalt/src/SelectList/VRSelectList.tsx
index b5ee497111..8aa1059136 100644
--- a/packages/gestalt/src/SelectList/VRSelectList.tsx
+++ b/packages/gestalt/src/SelectList/VRSelectList.tsx
@@ -152,7 +152,9 @@ const SelectListWithForwardRef = forwardRef<HTMLSelectElement, Props>(function I
           aria-describedby={focused ? ariaDescribedby : undefined}
           aria-invalid={hasErrorMessage ? 'true' : 'false'}
           className={classnames(styles.input, typographyStyle.truncate, {
-            [styles.enabledText]: !disabled,
+            [styles.placeholderText]: !disabled && placeholder && !value,
+            [styles.enabledText]:
+              (!disabled && placeholder && value) || (!disabled && !placeholder),
             [styles.enabledBorder]: !disabled && !hasErrorMessage,
             [styles.errorBorder]: !disabled && hasErrorMessage,
             [styles.disabledText]: disabled,
diff --git a/packages/gestalt/src/__snapshots__/SelectList.test.tsx.snap b/packages/gestalt/src/__snapshots__/SelectList.test.tsx.snap
index 22dd4cb08d..1a771f5b73 100644
--- a/packages/gestalt/src/__snapshots__/SelectList.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/SelectList.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`SelectList renders an option group 1`] = `
     </div>
     <select
       aria-invalid="false"
-      className="select base medium md normal enabledTransparent"
+      className="select base medium selected enabled md normal"
       disabled={false}
       id="optionGroup"
       onBlur={[Function]}
@@ -145,7 +145,7 @@ exports[`SelectList renders with a hidden label 1`] = `
     </div>
     <select
       aria-invalid="false"
-      className="select base medium md normal enabledTransparent"
+      className="select base medium selected enabled md normal"
       disabled={false}
       id="test"
       onBlur={[Function]}
@@ -210,7 +210,7 @@ exports[`SelectList renders with typical props 1`] = `
     </div>
     <select
       aria-invalid="false"
-      className="select base medium md normal enabledTransparent"
+      className="select base medium selected enabled md normal"
       disabled={false}
       id="test"
       onBlur={[Function]}