Remove Arrows from Editorfor

Asked

Viewed 244 times

2

I created my class with the guy int 

[Required(ErrorMessage = "Preencha o Numero")]
[DisplayName("Numero")]
public int Number { get; set; }

and so on Layout generated these little arrows, how do I remove the little arrows?

inserir a descrição da imagem aqui

Code of view:

<!--Number-->
<div class="alinhado col-md-4">
    <div class="form-group">
        <div class=" alinhadoLabel">
            @Html.LabelFor(model => model.Number,
                        htmlAttributes: new { @class = "control-label" })
        </div>
        <div class="alinhadoEditor">
            @Html.EditorFor(model => model.Number, 
                  new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Number, "", 
                  new { @class = "text-danger" })
        </div>
    </div>
</div>
<!--End Number-->
c# asp.net-mvc

  • This notation occurs naturally because you are using integers when defining your fields. Arrows allow your user to easily increment or decrease the field value. Not an ASP.NET MVC feature itself or Razor, but HTML5 functionality.

2 answers

3


Place TextBoxFor in place of EditorFor. The TextBoxFor generates a input text, while EditorFor generates input according to the type existing in your model which can be color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url and week which are actually the Tags Html5, i.e., the EditorFor generates the input according to the type, has advantages in this aspect, already seen that if the type change automatically fits the new type, then changing the type of input.

There is no way to take out the arrows in your case, because EditorFor generates a input of that kind:

<input type="number" name="Number" />

being a input of type number (Html5) which has the characteristics of accepting numbers and arrows a facility for the user to increase or decrease the existing value.

The only way around that is to put a TextBoxFor that generates a input thus:

<input type="text" name="Number" />

which is in case a input simple of the kind text.

References:

1

Another way is to add this CSS code:

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield;
}

Withdrawn of this reply from the English OS.

Browser other questions tagged c# asp.net-mvc

You are not signed in. Login or sign up in order to post.