diff --git a/src/routes/admin/posts/[id]/+page.svelte b/src/routes/admin/posts/[id]/+page.svelte
index 1b373e6..c5e366d 100644
--- a/src/routes/admin/posts/[id]/+page.svelte
+++ b/src/routes/admin/posts/[id]/+page.svelte
@@ -4,6 +4,7 @@
 	import { deserialize } from '$app/forms';
 	import MarkdownRenderer from '$lib/components/MarkdownRenderer.svelte';
 	import FeaturedImagePicker from '$lib/components/admin/FeaturedImagePicker.svelte';
+	import SelectDropdown from '$lib/components/admin/SelectDropdown.svelte';
 	import { parseHugoMarkdown } from '$lib/hugoParser';
 
 	let { data, form }: { data: PageData; form: ActionData } = $props();
@@ -355,22 +356,22 @@
 
 			<div class="sidebar-box">
 				<h3>分类</h3>
-				<select name="category_id" class="select-input" bind:value={selectedCategoryId}>
-					<option value="">-- 无 --</option>
-					{#each data.categories as category}
-						<option value={category.id}>{category.name}</option>
-					{/each}
-				</select>
+				<SelectDropdown
+					name="category_id"
+					label="分类"
+					options={data.categories.map((category) => ({ value: category.id, label: category.name }))}
+					bind:value={selectedCategoryId}
+				/>
 			</div>
 
 			<div class="sidebar-box">
 				<h3>{$page.data.aliases?.series || '系列'}</h3>
-				<select name="series_id" class="select-input" bind:value={selectedSeriesId}>
-					<option value="">-- 无 --</option>
-					{#each seriesList as series}
-						<option value={series.id}>{series.name}</option>
-					{/each}
-				</select>
+				<SelectDropdown
+					name="series_id"
+					label={$page.data.aliases?.series || '系列'}
+					options={seriesList.map((series) => ({ value: series.id, label: series.name }))}
+					bind:value={selectedSeriesId}
+				/>
 				<input
 					type="number"
 					name="series_weight"
@@ -615,13 +616,11 @@
 		box-shadow: 0 0 0 3px rgba(65, 155, 56, 0.08);
 	}
 
-	.select-input:focus,
 	.sidebar-input:focus {
 		outline: none;
 		border-bottom-color: var(--accent-color, #419b38);
 	}
 
-	.select-input,
 	.sidebar-input {
 		width: 100%;
 		padding: 10px 0;
@@ -635,10 +634,6 @@
 		transition: border-bottom-color 0.3s ease;
 	}
 
-	.select-input {
-		cursor: pointer;
-	}
-
 	.form-group textarea:focus {
 		outline: none;
 		border-color: var(--accent-color, #419b38);
diff --git a/src/routes/admin/posts/new/+page.svelte b/src/routes/admin/posts/new/+page.svelte
index b96d3d4..484adc6 100644
--- a/src/routes/admin/posts/new/+page.svelte
+++ b/src/routes/admin/posts/new/+page.svelte
@@ -4,6 +4,7 @@
 	import { deserialize } from '$app/forms';
 	import MarkdownRenderer from '$lib/components/MarkdownRenderer.svelte';
 	import FeaturedImagePicker from '$lib/components/admin/FeaturedImagePicker.svelte';
+	import SelectDropdown from '$lib/components/admin/SelectDropdown.svelte';
 	import { parseHugoMarkdown } from '$lib/hugoParser';
 
 	let { data, form }: { data: PageData; form: ActionData } = $props();
@@ -361,22 +362,22 @@
 
 			<div class="sidebar-box">
 				<h3>分类</h3>
-				<select name="category_id" class="select-input" bind:value={selectedCategoryId}>
-					<option value="">-- 无 --</option>
-					{#each data.categories as category}
-						<option value={category.id}>{category.name}</option>
-					{/each}
-				</select>
+				<SelectDropdown
+					name="category_id"
+					label="分类"
+					options={data.categories.map((category) => ({ value: category.id, label: category.name }))}
+					bind:value={selectedCategoryId}
+				/>
 			</div>
 
 			<div class="sidebar-box">
 				<h3>{$page.data.aliases?.series || '系列'}</h3>
-				<select name="series_id" class="select-input" bind:value={selectedSeriesId}>
-					<option value="">-- 无 --</option>
-					{#each seriesList as series}
-						<option value={series.id}>{series.name}</option>
-					{/each}
-				</select>
+				<SelectDropdown
+					name="series_id"
+					label={$page.data.aliases?.series || '系列'}
+					options={seriesList.map((series) => ({ value: series.id, label: series.name }))}
+					bind:value={selectedSeriesId}
+				/>
 				<input
 					type="number"
 					name="series_weight"
@@ -620,13 +621,11 @@
 		box-shadow: 0 0 0 3px rgba(65, 155, 56, 0.08);
 	}
 
-	.select-input:focus,
 	.sidebar-input:focus {
 		outline: none;
 		border-bottom-color: var(--accent-color, #419b38);
 	}
 
-	.select-input,
 	.sidebar-input {
 		width: 100%;
 		padding: 10px 0;
@@ -640,10 +639,6 @@
 		transition: border-bottom-color 0.3s ease;
 	}
 
-	.select-input {
-		cursor: pointer;
-	}
-
 	.form-group textarea:focus {
 		outline: none;
 		border-color: var(--accent-color, #419b38);