如何移除Input type="number"及TextBoxFor中的增减箭头？

Got it, let's fix those pesky up/down arrows on number inputs—especially since you're using them for phone numbers where those controls don't serve any practical purpose. Here's how to handle both scenarios:

1. Removing Arrows from TextBoxFor (ASP.NET MVC) #

First, make sure your TextBoxFor helper is rendering an <input type="number"> (you might need to explicitly set the type if it's not inferred). Then, use CSS to target the spin buttons across all major browsers.

Step 1: Add the CSS class #

Add this CSS to your stylesheet to hide the arrows:

/* Hide number input spin buttons across browsers */
.no-spin::-webkit-inner-spin-button,
.no-spin::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.no-spin::-moz-number-spin-box {
    -moz-appearance: textfield;
}

/* For legacy IE support (optional, since IE is rarely used now) */
.no-spin {
    -ms-appearance: none;
}

Step 2: Apply the class to TextBoxFor #

When rendering your input, add the no-spin class to the HTML attributes:

@Html.TextBoxFor(m => m.PhoneNumber, new { @type = "number", @class = "form-control no-spin" })

2. Removing Arrows from Standard <input type="number"> #

This uses the exact same CSS approach—just apply the no-spin class directly to the input element:

<input type="number" class="no-spin" placeholder="Enter your phone number" />

Pro Tip for Phone Numbers #

Since you're using this input for phone numbers, consider switching to <input type="tel"> instead. It:

• Automatically brings up a numeric keyboard on mobile devices
• Doesn't show spin buttons by default
• Still supports numeric input validation if needed

Example:

<input type="tel" placeholder="Enter your phone number" />

内容的提问来源于stack exchange，提问作者Victor Zyon Tiangson