diff --git a/core/css.ts b/core/css.ts
index 2d024acca..2071a28a5 100644
--- a/core/css.ts
+++ b/core/css.ts
@@ -340,6 +340,17 @@ let content = `
   display: none;
 }
 
+/* Remove the increase and decrease arrows on the field number editor */
+input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
+input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type=number] {
+  -moz-appearance: textfield;
+}
+
 .blocklyMainBackground {
   stroke-width: 1;
   stroke: #c6c6c6;  /* Equates to #ddd due to border being off-pixel. */
diff --git a/core/field_number.ts b/core/field_number.ts
index 2e3da1d91..9f45d8ef6 100644
--- a/core/field_number.ts
+++ b/core/field_number.ts
@@ -291,14 +291,17 @@ export class FieldNumber extends FieldInput<number> {
    *
    * @returns The newly created number input editor.
    */
-  protected override widgetCreate_(): HTMLElement {
-    const htmlInput = super.widgetCreate_();
+  protected override widgetCreate_(): HTMLInputElement {
+    const htmlInput = super.widgetCreate_() as HTMLInputElement;
+    htmlInput.type = 'number';
 
     // Set the accessibility state
     if (this.min_ > -Infinity) {
+      htmlInput.min = `${this.min_}`;
       aria.setState(htmlInput, aria.State.VALUEMIN, this.min_);
     }
     if (this.max_ < Infinity) {
+      htmlInput.max = `${this.max_}`;
       aria.setState(htmlInput, aria.State.VALUEMAX, this.max_);
     }
     return htmlInput;