diff --git a/frontend/src/views/chart/components/component-style/MarginSelector.vue b/frontend/src/views/chart/components/component-style/MarginSelector.vue
index 41ebf2aa2a..3ceaf0558c 100644
--- a/frontend/src/views/chart/components/component-style/MarginSelector.vue
+++ b/frontend/src/views/chart/components/component-style/MarginSelector.vue
@@ -11,25 +11,25 @@
         </el-form-item>
         <div v-show="showProperty('marginModel') && marginForm.marginModel !== 'auto'">
           <el-form-item v-show="showProperty('marginTop')" :label="$t('chart.text_pos_top')" class="form-item" prop="marginTop">
-            <el-input v-model="marginForm.marginTop" :placeholder="placeholder" oninput="value=value.replace(/[^\d]/g,'')" @change="changeMarginStyle(marginForm.marginTop, 'marginTop')">
+            <el-input v-model="marginForm.marginTop" :placeholder="placeholder" type="number" class="hide-icon-number" @change="changeMarginStyle(marginForm.marginTop, 'marginTop')">
               <template v-if="unitSuffix" slot="append">{{ unitSuffix }}</template>
             </el-input>
           </el-form-item>
 
           <el-form-item v-show="showProperty('marginBottom')" :label="$t('chart.text_pos_bottom')" class="form-item" prop="marginBottom">
-            <el-input v-model="marginForm.marginBottom" :placeholder="placeholder" oninput="value=value.replace(/[^\d]/g,'')" @change="changeMarginStyle(marginForm.marginBottom, 'marginBottom')">
+            <el-input v-model="marginForm.marginBottom" :placeholder="placeholder" type="number" class="hide-icon-number" @change="changeMarginStyle(marginForm.marginBottom, 'marginBottom')">
               <template v-if="unitSuffix" slot="append">{{ unitSuffix }}</template>
             </el-input>
           </el-form-item>
 
           <el-form-item v-show="showProperty('marginLeft')" :label="$t('chart.text_pos_left')" class="form-item" prop="marginLeft">
-            <el-input v-model="marginForm.marginLeft" :placeholder="placeholder" oninput="value=value.replace(/[^\d]/g,'')" @change="changeMarginStyle(marginForm.marginLeft, 'marginLeft')">
+            <el-input v-model="marginForm.marginLeft" :placeholder="placeholder" type="number" class="hide-icon-number" @change="changeMarginStyle(marginForm.marginLeft, 'marginLeft')">
               <template v-if="unitSuffix" slot="append">{{ unitSuffix }}</template>
             </el-input>
           </el-form-item>
 
           <el-form-item v-show="showProperty('marginRight')" :label="$t('chart.text_pos_right')" class="form-item" prop="marginRight">
-            <el-input v-model="marginForm.marginRight" :placeholder="placeholder" oninput="value=value.replace(/[^\d]/g,'')" @change="changeMarginStyle(marginForm.marginRight, 'marginRight')">
+            <el-input v-model="marginForm.marginRight" :placeholder="placeholder" type="number" class="hide-icon-number" @change="changeMarginStyle(marginForm.marginRight, 'marginRight')">
               <template v-if="unitSuffix" slot="append">{{ unitSuffix }}</template>
             </el-input>
           </el-form-item>
@@ -196,4 +196,12 @@ export default {
   cursor: pointer;
   z-index: 1003;
 }
+::v-deep .hide-icon-number input::-webkit-outer-spin-button,
+::v-deep .hide-icon-number input::-webkit-inner-spin-button {
+  -webkit-appearance: none !important;
+}
+::v-deep .hide-icon-number input[type="number"] {
+  -moz-appearance: textfield !important;
+}
+
 </style>