diff --git a/packages/input/src/index.vue b/packages/input/src/index.vue
index 17173346a5..de8784d11e 100644
--- a/packages/input/src/index.vue
+++ b/packages/input/src/index.vue
@@ -243,7 +243,7 @@ export default defineComponent({
       resize: props.resize,
     }))
     const inputDisabled = computed(() => props.disabled || elForm.disabled)
-    const nativeInputValue = computed(() => String(props.modelValue))
+    const nativeInputValue = computed(() => (props.modelValue === null || props.modelValue === undefined) ? '' : String(props.modelValue))
     const upperLimit = computed(() => ctx.attrs.maxlength)
     const showClear = computed(() => {
       return props.clearable &&
diff --git a/packages/theme-chalk/src/message-box.scss b/packages/theme-chalk/src/message-box.scss
index b2be54bd0f..30d04a802f 100644
--- a/packages/theme-chalk/src/message-box.scss
+++ b/packages/theme-chalk/src/message-box.scss
@@ -77,7 +77,7 @@
     color: $--messagebox-content-color;
     font-size: $--messagebox-content-font-size;
   }
-  
+
   @include e(container) {
     position: relative;
   }
@@ -85,7 +85,7 @@
   @include e(input) {
     padding-top: 15px;
 
-    & input.invalid {
+    & div.invalid > input {
       border-color: $--color-danger;
       &:focus {
         border-color: $--color-danger;