diff --git a/src/components/CustomSelect.tsx b/src/components/CustomSelect.tsx
index 9341c1f..850eb7b 100644
--- a/src/components/CustomSelect.tsx
+++ b/src/components/CustomSelect.tsx
@@ -225,8 +225,10 @@ export default function CustomSelect(props: CustomSelectProps) {
         'react-js-cron-select': true,
         'react-js-cron-custom-select': true,
         [`${className}-select`]: !!className,
+        //empty value
+        'react-js-cron-select-empty': !stringValue,
       }),
-    [className]
+    [className, stringValue]
   )
 
   const popupClassName = useMemo(
diff --git a/src/stories/constants.stories.ts b/src/stories/constants.stories.ts
index e12f9b6..fa5e018 100644
--- a/src/stories/constants.stories.ts
+++ b/src/stories/constants.stories.ts
@@ -71,6 +71,75 @@ export const FRENCH_LOCALE = {
   // Order is important, the index will be used as value
   altWeekDays: ['DIM', 'LUN', 'MAR', 'MER', 'JEU', 'VEN', 'SAM'],
 }
+
+export const ZH_LOCALE = {
+  everyText: '每',
+  emptyMonths: '每月',
+  emptyMonthDays: '每月的每一天',
+  emptyMonthDaysShort: '日',
+  emptyWeekDays: '每周的每一天',
+  emptyWeekDaysShort: '星期',
+  emptyHours: '每小时',
+  emptyMinutes: '每分钟',
+  emptyMinutesForHourPeriod: '每',
+  yearOption: '年',
+  monthOption: '月',
+  weekOption: '周',
+  dayOption: '天',
+  hourOption: '小时',
+  minuteOption: '分钟',
+  rebootOption: '重启',
+  prefixPeriod: '每',
+  prefixMonths: '在',
+  prefixMonthDays: '在',
+  prefixWeekDays: '在',
+  prefixWeekDaysForMonthAndYearPeriod: '和',
+  prefixHours: '在',
+  prefixMinutes: ':',
+  prefixMinutesForHourPeriod: '在',
+  suffixMinutesForHourPeriod: '分钟',
+  errorInvalidCron: '无效的 cron 表达式',
+  clearButtonText: '清除',
+  weekDays: [
+    '星期日',
+    '星期一',
+    '星期二',
+    '星期三',
+    '星期四',
+    '星期五',
+    '星期六',
+  ],
+  months: [
+    '一月',
+    '二月',
+    '三月',
+    '四月',
+    '五月',
+    '六月',
+    '七月',
+    '八月',
+    '九月',
+    '十月',
+    '十一月',
+    '十二月',
+  ],
+  altWeekDays: ['日', '一', '二', '三', '四', '五', '六'],
+  altMonths: [
+    '1月',
+    '2月',
+    '3月',
+    '4月',
+    '5月',
+    '6月',
+    '7月',
+    '8月',
+    '9月',
+    '10月',
+    '11月',
+    '12月',
+  ],
+}
+
 export const ENGLISH_VARIANT_LOCALE = {
   everyText: 'all',
   emptyHours: 'all hours',
diff --git a/src/stories/index.stories.tsx b/src/stories/index.stories.tsx
index 0f334d3..c8c6e24 100644
--- a/src/stories/index.stories.tsx
+++ b/src/stories/index.stories.tsx
@@ -22,6 +22,7 @@ import {
   ENGLISH_VARIANT_LOCALE,
   FRENCH_LOCALE,
   NO_PREFIX_SUFFIX_LOCALE,
+  ZH_LOCALE,
 } from './constants.stories'
 import './styles.stories.css'
 import { useCronReducer } from './utils.stories'
@@ -106,7 +107,7 @@ export function DynamicSettings() {
   const [allowEmpty, setAllowEmpty] = useState<AllowEmpty>('for-default-value')
   const [clockFormat, setClockFormat] = useState<ClockFormat | ''>('')
   const [locale, setLocale] = useState<
-    'english' | 'french' | 'english-variant'
+    'english' | 'french' | 'english-variant' | 'chinese'
   >('english')
   const [defaultPeriod, setDefaultPeriod] = useState<PeriodType>('day')
   const [selectedPeriod, setSelectedPeriod] = useState<PeriodType>('day')
@@ -154,6 +155,9 @@ export function DynamicSettings() {
       case 'english-variant':
         newLocale = ENGLISH_VARIANT_LOCALE
         break
+      case 'chinese':
+        newLocale = ZH_LOCALE
+        break
 
       default:
         newLocale = {}
@@ -330,6 +334,7 @@ export function DynamicSettings() {
           >
             <Radio.Button value='english'>English</Radio.Button>
             <Radio.Button value='french'>French</Radio.Button>
+            <Radio.Button value='chinese'>Chinese</Radio.Button>
             <Radio.Button value='english-variant'>English variant</Radio.Button>
           </Radio.Group>
         </Form.Item>
diff --git a/src/styles.css b/src/styles.css
index 229a4ea..2054bc9 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -24,13 +24,14 @@ div.react-js-cron-select {
   position: relative;
   align-items: center;
 }
-/* Absolute position only when there are one child, meaning when no items are selected. */
-.react-js-cron-select
-  .ant-select-selection-overflow:has(> :nth-child(-n + 1):last-child) {
+
+/* Absolute position only when no items are selected. */
+.react-js-cron-select-empty .ant-select-selection-overflow {
   position: absolute;
   top: 0;
   left: 0;
 }
+
 /* Center placeholder vertically. */
 .react-js-cron-select .ant-select-selection-placeholder {
   margin-top: -2px;
diff --git a/src/tests/__snapshots__/fields.test.tsx.snap b/src/tests/__snapshots__/fields.test.tsx.snap
index f9bef4b..9afd126 100644
--- a/src/tests/__snapshots__/fields.test.tsx.snap
+++ b/src/tests/__snapshots__/fields.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`Fields <Hours /> matches the original snapshot 1`] = `
       at
     </span>
     <div
-      class="ant-select ant-select-outlined react-js-cron-select react-js-cron-custom-select css-dev-only-do-not-override-1261szd ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
+      class="ant-select ant-select-outlined react-js-cron-select react-js-cron-custom-select react-js-cron-select-empty css-dev-only-do-not-override-1261szd ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
       data-testid="custom-select-hours"
     >
       <div
@@ -101,7 +101,7 @@ exports[`Fields <Minutes /> matches the original snapshot 1`] = `
       :
     </span>
     <div
-      class="ant-select ant-select-outlined react-js-cron-select react-js-cron-custom-select css-dev-only-do-not-override-1261szd ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
+      class="ant-select ant-select-outlined react-js-cron-select react-js-cron-custom-select react-js-cron-select-empty css-dev-only-do-not-override-1261szd ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
       data-testid="custom-select-minutes"
     >
       <div
@@ -193,7 +193,7 @@ exports[`Fields <MonthDays /> matches the original snapshot 1`] = `
       on
     </span>
     <div
-      class="ant-select ant-select-outlined react-js-cron-select react-js-cron-custom-select css-dev-only-do-not-override-1261szd ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
+      class="ant-select ant-select-outlined react-js-cron-select react-js-cron-custom-select react-js-cron-select-empty css-dev-only-do-not-override-1261szd ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
       data-testid="custom-select-month-days"
     >
       <div
@@ -285,7 +285,7 @@ exports[`Fields <Months /> matches the original snapshot 1`] = `
       in
     </span>
     <div
-      class="ant-select ant-select-outlined react-js-cron-select react-js-cron-custom-select css-dev-only-do-not-override-1261szd ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
+      class="ant-select ant-select-outlined react-js-cron-select react-js-cron-custom-select react-js-cron-select-empty css-dev-only-do-not-override-1261szd ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
       data-testid="custom-select-months"
     >
       <div
@@ -454,7 +454,7 @@ exports[`Fields <WeekDays /> matches the original snapshot 1`] = `
       on
     </span>
     <div
-      class="ant-select ant-select-outlined react-js-cron-select react-js-cron-custom-select css-dev-only-do-not-override-1261szd ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
+      class="ant-select ant-select-outlined react-js-cron-select react-js-cron-custom-select react-js-cron-select-empty css-dev-only-do-not-override-1261szd ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
       data-testid="custom-select-week-days"
     >
       <div