diff --git a/devui/input-number/src/input-number.scss b/devui/input-number/src/input-number.scss
index ce20f121a9dd5d022e9d5d9cbb28a1c93ea89e3e..287e4fb55be0ae1e153ec3d984ef6592cf8b2edc 100644
--- a/devui/input-number/src/input-number.scss
+++ b/devui/input-number/src/input-number.scss
@@ -6,9 +6,33 @@
 
 .devui-input-number {
   position: relative;
-  display: block;
-  width: 180px;
+  display: inline-block;
+  width: 80px;
   line-height: 38px;
+  margin-right: 12px;
+
+  &:hover:not(.devui-input-disabled) {
+    .devui-input-box {
+      border-color: var(--devui-form-control-line-hover);
+    }
+
+    .devui-control-buttons:not(.disabled) {
+      display: flex;
+      border-color: var(--devui-form-control-line-hover);
+    }
+  }
+
+  &:focus-within {
+    .devui-control-buttons {
+      display: flex;
+    }
+  }
+
+  .active {
+    border: 1px solid var(--devui-form-control-line-active) !important;
+    display: flex !important;
+  }
+
 
   &.devui-input-disabled {
     .devui-subtract,
@@ -20,8 +44,9 @@
     }
 
     .devui-input-style {
-      background-color: #f5f7fa;
-      color: #c0c4cc;
+      border-color: var(--devui-disabled-line) !important;
+      color: var(--devui-disabled-text) !important;
+      background-color: var(--devui-disabled-bg) !important;
     }
   }
 
@@ -34,7 +59,6 @@
     }
 
     .devui-input-style {
-      width: 70px;
       height: 34px;
       line-height: 34px;
     }
@@ -45,17 +69,10 @@
     .devui-add {
       width: 60px;
     }
-
-    .devui-input-style {
-      width: 90px;
-    }
   }
 
   .devui-input-item {
-    display: flex;
-    display: -webkit-box;
-    width: 200px;
-    line-height: 38px;
+    line-height: 100%;
   }
 
   .devui-input-style::-webkit-outer-spin-button,
@@ -96,24 +113,65 @@
   }
 
   .devui-input-style {
-    flex-grow: 1;
     outline: none;
-    background-color: #ffffff;
-    border: 1px solid #dcdfe6;
-    border-radius: 2px;
-    padding: 5px 10px;
-    line-height: 38px;
-    font-size: 12px;
-    color: #252b3a;
-    width: 80px;
+    background-color: var(--devui-base-bg);
+    border: 1px solid var(--devui-form-control-line);
+    border-radius: var(--devui-border-radius);
+    padding: 4px 8px;
+    line-height: 18px;
+    font-size: var(--devui-font-size);
+    color: var(--devui-text);
+    width: 100%;
     display: block;
     cursor: text;
-    height: 38px;
-    text-align: center;
-    transition: border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    height: 28px;
+    transition: border-color 0.3s var(--devui-animation-ease-in-out-smooth);
+  }
+
+  .devui-input-box {
+    box-sizing: border-box;
+    padding: 4px 8px;
+    font-size: var(--devui-font-size);
+    vertical-align: middle;
+    border-radius: var(--devui-border-radius);
+    outline: none;
+    width: 100%;
+    line-height: 20px;
+    height: 28px;
+    border-width: 1px;
+    border-style: solid;
+
+    &:not(.disabled) {
+      background-color: var(--devui-base-bg);
+      border-color: var(--devui-line);
+      color: var(--devui-text);
+    }
   }
 
   .disabled {
     cursor: not-allowed;
   }
+
+  .devui-control-buttons {
+    display: none;
+    position: absolute;
+    right: 0;
+    width: 22px;
+    height: 100%;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border-left: 1px solid var(--devui-line);
+    box-sizing: border-box;
+    line-height: 100%;
+    border-radius: 0 var(--devui-border-radius) var(--devui-border-radius) 0;
+
+    &:not(.disabled) {
+      cursor: pointer;
+    }
+
+    & > span {
+      display: flex;
+    }
+  }
 }
diff --git a/devui/input-number/src/input-number.tsx b/devui/input-number/src/input-number.tsx
index 01ec9a86ddac5f1e1dc46e6cb8841717ed6405a9..842f0a192dfb89ee843ab62355ad78efbca99e43 100644
--- a/devui/input-number/src/input-number.tsx
+++ b/devui/input-number/src/input-number.tsx
@@ -1,6 +1,7 @@
 import { defineComponent, ref, computed } from 'vue';
 import { inputNumberProps, InputNumberProps } from './input-number-types';
 import './input-number.scss';
+import Icon from '../../icon/src/icon';
 
 export default defineComponent({
   name: 'DInputNumber',
@@ -9,6 +10,8 @@ export default defineComponent({
   setup(props: InputNumberProps, ctx) {
     const inputVal = ref(props.modelValue);
 
+    const focusVal = ref('');
+
     // 大小
     const isSize = computed(() => {
       return `devui-input-number-${props.size}`;
@@ -16,7 +19,7 @@ export default defineComponent({
 
     // 判断是否禁用
     const isDisabled = computed(() => {
-      return props.disabled ? 'devui-input-disabled' : '';
+      return props.disabled;
     });
 
     //新增
@@ -24,6 +27,7 @@ export default defineComponent({
       if (props.disabled) return;
       if (inputVal.value >= props.max) return;
       inputVal.value += props.step != 0 ? props.step : 1;
+      focusVal.value = 'active';
       ctx.emit('change', inputVal.value);
       ctx.emit('update:modelValue', inputVal.value);
     };
@@ -32,6 +36,7 @@ export default defineComponent({
       if (props.disabled) return;
       if (inputVal.value <= props.min) return;
       inputVal.value -= props.step != 0 ? props.step : 1;
+      focusVal.value = 'active';
       ctx.emit('change', inputVal.value);
       ctx.emit('update:modelValue', inputVal.value);
     };
@@ -41,9 +46,11 @@ export default defineComponent({
       ctx.emit('update:modelValue', val.data);
     };
     const onFocus = ($event: Event) => {
+      focusVal.value = 'active';
       ctx.emit('focus', $event);
     };
     const onBlur = ($event: Event) => {
+      focusVal.value = '';
       ctx.emit('blur', $event);
     };
     const onChange = ($event: Event) => {
@@ -54,6 +61,7 @@ export default defineComponent({
     };
     return {
       inputVal,
+      focusVal,
       isDisabled,
       isSize,
       add,
@@ -67,6 +75,7 @@ export default defineComponent({
   },
   render() {
     const {
+      focusVal,
       placeholder,
       add,
       inputVal,
@@ -79,27 +88,26 @@ export default defineComponent({
       onBlur,
       onFocus,
     } = this;
-    const dInputNum = ['devui-input-number', isDisabled, isSize];
+    const dInputNum = ['devui-input-number', isDisabled ? 'devui-input-disabled' : '', isSize];
     return (
       <div class={dInputNum}>
+        <div  onBlur={onBlur} tabindex="1" class={['devui-control-buttons', focusVal.value]}>
+          <span  onClick={add}><Icon size="12px" name="chevron-up"  ></Icon></span>
+          <span  onClick={subtract}><Icon size="12px" name="chevron-down" ></Icon></span>
+        </div>
         <div class="devui-input-item">
-          <span class="devui-subtract" onClick={subtract}>
-            -
-          </span>
           <input
             type="number"
             value={inputVal}
-            class="devui-input-style"
             placeholder={placeholder}
+            disabled={isDisabled}
+            class={['devui-input-style devui-input-box', focusVal.value]}
             onInput={onInput}
             onChange={onChange}
             onFocus={onFocus}
             onBlur={onBlur}
             onKeydown={onKeydown}
           />
-          <span class="devui-add" onClick={add}>
-            +
-          </span>
         </div>
       </div>
     );