diff --git a/src/runtime/components/forms/Select.vue b/src/runtime/components/forms/Select.vue
index daf94a78..8649552b 100644
--- a/src/runtime/components/forms/Select.vue
+++ b/src/runtime/components/forms/Select.vue
@@ -262,7 +262,7 @@ export default defineComponent({
         variant?.replaceAll('{color}', color.value),
         (isLeading.value || slots.leading) && ui.value.leading.padding[size.value],
         (isTrailing.value || slots.trailing) && ui.value.trailing.padding[size.value]
-      ), props.selectClass)
+      ), props.placeholder && !props.modelValue && ui.value.placeholder, props.selectClass)
     })
 
     const isLeading = computed(() => {
diff --git a/src/runtime/components/forms/SelectMenu.vue b/src/runtime/components/forms/SelectMenu.vue
index be5f7273..a747ab4f 100644
--- a/src/runtime/components/forms/SelectMenu.vue
+++ b/src/runtime/components/forms/SelectMenu.vue
@@ -384,7 +384,7 @@ export default defineComponent({
         variant?.replaceAll('{color}', color.value),
         (isLeading.value || slots.leading) && ui.value.leading.padding[size.value],
         (isTrailing.value || slots.trailing) && ui.value.trailing.padding[size.value]
-      ), props.selectClass)
+      ), props.placeholder && !props.modelValue && ui.value.placeholder, props.selectClass)
     })
 
     const isLeading = computed(() => {
diff --git a/src/runtime/ui.config/forms/select.ts b/src/runtime/ui.config/forms/select.ts
index 1016c79a..c9039839 100644
--- a/src/runtime/ui.config/forms/select.ts
+++ b/src/runtime/ui.config/forms/select.ts
@@ -3,7 +3,7 @@ import input from './input'
 export default {
   ...input,
   form: 'form-select',
-  placeholder: 'text-gray-900 dark:text-white',
+  placeholder: 'text-gray-400 dark:text-gray-500',
   default: {
     size: 'sm',
     color: 'white',